我一直在尝试让我的联系表单验证并向用户显示所需内容，但我一直在让所有输入都起作用时遇到问题。
你可以在这里看到:http://denverbarr.com
由于某些原因，占位符的行为不正确，因为它们有一个未设置的奇怪填充。由于某种原因，我无法输入要验证的名称。
这是我一直在使用的代码:
HTML 代码
<div class="six col text-center" id="contact">
<div id="contactform">
<fieldset>
<div class="row">
<div class="twelve col">
<input placeholder="Name" id="user_name" name="user_name" required="true" size="30" type="text" value="">
</div>
<div class="twelve col">
<input id="firm" name="firm" placeholder="Firm" size="30" type="text" value="">
</div>
<div class="twelve col">
<input id="email" name="email" placeholder="Email" required="true" size="30" type="email" value="">
</div>
<div class="twelve col">
<input id="phone" name="phone" placeholder="Phone" required="true" size="30" type="tel" value="">
</div> <div class="twelve col">
<textarea cols="40" id="message" name="message" placeholder="Message" required="true" rows="5">
</textarea>
</div>
<div class="twelve col">
<input type="submit" id="submit_btn" value="Submit" />
</div>
</div>
</fieldset>
<div id="contact_results"></div>
</div>
</div>
$(document).ready(function() {
$("#submit_btn").click(function() {
var proceed = true;
$("#contactform input[required=true], #contactform textarea[required=true]").each(function(){
$(this).css('border-color','');
if(!$.trim($(this).val())){ //if this field is empty
$(this).css('border-color','red'); //change border color to red
proceed = false; //set do not proceed flag
}
var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
$(this).css('border-color','red'); //change border color to red
proceed = false; //set do not proceed flag
}
});
if(proceed) //everything looks good! proceed...
{
post_data = {
'user_name' : $('input[name=user_name]').val(),
'user_email' : $('input[name=email]').val(),
'phone' : $('input[name=phone]').val(),
'firm' : $('input[name=firm]').val(),
'msg' : $('textarea[name=message]').val()
};
$.post('emal.php', post_data, function(response){
if(response.type == 'error'){ //load json data from server and output message
output = '<div class="error">'+response.text+'</div>';
}else{
output = '<div class="success">'+response.text+'</div>';
//reset values in all input fields
$("#contactform input[required=true], #contactform textarea[required=true]").val('');
$("#contactform").slideUp(); //hide form after success
}
$("#contactform #contact_results").hide().html(output).slideDown();
}, 'json');
}
});
$("#contactform input[required=true], #contactform textarea[required=true]").keyup(function() {
$(this).css('border-color','');
$("#result").slideUp();
});
});
和 php 端:
<?php
if($_POST)
{
$to_email = "info@denverbarr.com"; //Recipient email, Replace with own email here
//check if its an ajax request, exit if not
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
$output = json_encode(array( //create JSON data
'type'=>'error',
'text' => 'Sorry Request must be Ajax POST'
));
die($output); //exit script outputting json data
}
//Sanitize input data using PHP filter_var().
$user_name = filter_var($_POST["user_name"], FILTER_SANITIZE_STRING);
$user_email = filter_var($_POST["user_email"], FILTER_SANITIZE_EMAIL);
$phone = filter_var($_POST["phone"], FILTER_SANITIZE_NUMBER_INT);
$firm = filter_var($_POST["firm"], FILTER_SANITIZE_STRING);
$message = filter_var($_POST["msg"], FILTER_SANITIZE_STRING);
//additional php validation
if(strlen($use_name)<4){ // If length is less than 4 it will output JSON error.
$output = json_encode(array('type'=>'error', 'text' => 'Name is too short or empty!'));
die($output);
}
if(!filter_var($user_email, FILTER_VALIDATE_EMAIL)){ //email validation
$output = json_encode(array('type'=>'error', 'text' => 'Please enter a valid email!'));
die($output);
}
if(!filter_var($phone, FILTER_SANITIZE_NUMBER_FLOAT)){ //check for valid numbers in phone number field
$output = json_encode(array('type'=>'error', 'text' => 'Enter only digits in phone number'));
die($output);
}
if(strlen($message)<3){ //check emtpy message
$output = json_encode(array('type'=>'error', 'text' => 'Too short message! Please enter something.'));
die($output);
}
//email body
$message_body = $message."\r\n\r\n-".$user_name."\r\nEmail : ".$user_email."\r\nPhone Number : ". $phone_number ;
//proceed with PHP email.
$headers = 'From: '.$user_name.'' . "\r\n" .
'Reply-To: '.$user_email.'' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
$send_mail = mail($to_email, $subject, $message_body, $headers);
if(!$send_mail)
{
//If mail couldn't be sent output error. Check your PHP email configuration (if it ever happens)
$output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));
die($output);
}else{
$output = json_encode(array('type'=>'message', 'text' => .$user_name .' Thank you for your email'));
die($output);
}
}
?>
我假设问题出在这里:
$("#submit_btn").click(function() {
var proceed = true;
$("#contactform input[required=true], #contactform textarea[required=true]").each(function(){
$(this).css('border-color','');
if(!$.trim($(this).val())){ //if this field is empty
$(this).css('border-color','red'); //change border color to red
proceed = false; //set do not proceed flag
}
var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
$(this).css('border-color','red'); //change border color to red
proceed = false; //set do not proceed flag
}
});
因为它的突出显示被绊倒了。它应该突出显示姓名、电子邮件、电话和消息框
最佳答案
CSS 填充问题
您的 css 占位符代码错误。您错过了 line-height。您必须在#contact 输入中添加 class。这个类在 line-hight:20px;，选择main.css 文件中，大约 842 行。
验证问题
在 $("#submit_btn").click 上，如果您提醒 user_name 文本框的值。它赋予“名称”值(value)。这样您的验证就会得到 true。
尝试在您的 $("#submit_btn").click 中添加波纹管并检查:
alert($('#user_name').val())
或所有输入警报
alert($(this).val())
关于html - 联系表单验证问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31884116/