我一直试图让我的联系表单进行验证并显示用户需要什么，但我一直遇到问题让所有输入都表现出来。
您可以在此处查看：http://denverbarr.com
由于某种原因，占位符的行为不正确，因为它们有一个未设置的奇怪填充。由于某种原因，我无法获得要验证的名称输入。
以下是我一直在使用的代码：
HTML CODE
<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
}
});
因为它的突出显示正在绊倒。它应该突出显示名称，电子邮件，电话和消息框
答案 0 :(得分：1)
Css填充问题
占位符导致代码错误css。你错过了line-height。您必须在line-hight:20px; 类中添加#contact input, select。这个类位于main.css文件附近约842行。
验证问题
如果您提醒$("#submit_btn").click文本框的值，请在user_name上。它给出了名字＆＃39;值。这样您的验证就会获得true。
尝试在$("#submit_btn").click中添加以下内容并检查：
alert($('#user_name').val())
OR表示所有输入提示
alert($(this).val())
答案 1 :(得分：0)
您可以从修复这些错误开始：
（抱歉，无法发布截图）
Uncaugh TypeError：无法读取null placeholder.js的属性'addEventListener'：70
参数列表main.js：18 之后的Uncaught SyntaxError：missing）