html - Contact Form Validation Issues -
i've been trying contact form validate , show required user i've been having issues getting of inputs behave.
you can see here: http://denverbarr.com
for reason placeholders aren't behaving correctly in have weird padding not set. , reason can't name input validate.
here code i've been using:
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 field empty $(this).css('border-color','red'); //change border color red proceed = false; //set 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 red proceed = false; //set 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 server , output message output = '<div class="error">'+response.text+'</div>'; }else{ output = '<div class="success">'+response.text+'</div>'; //reset values in 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(); }); }); and php side:
<?php if($_post) { $to_email = "info@denverbarr.com"; //recipient email, replace own email here //check if ajax request, exit if not if(!isset($_server['http_x_requested_with']) , strtolower($_server['http_x_requested_with']) != 'xmlhttprequest') { $output = json_encode(array( //create json data 'type'=>'error', 'text' => 'sorry request must 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 less 4 output json error. $output = json_encode(array('type'=>'error', 'text' => 'name short or empty!')); die($output); } if(!filter_var($user_email, filter_validate_email)){ //email validation $output = json_encode(array('type'=>'error', 'text' => 'please enter valid email!')); die($output); } if(!filter_var($phone, filter_sanitize_number_float)){ //check valid numbers in phone number field $output = json_encode(array('type'=>'error', 'text' => 'enter 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 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 sent output error. check php email configuration (if ever happens) $output = json_encode(array('type'=>'error', 'text' => 'could not send mail! please check php mail configuration.')); die($output); }else{ $output = json_encode(array('type'=>'message', 'text' => .$user_name .' thank email')); die($output); } } ?> i'm going assume issue here:
$("#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 field empty $(this).css('border-color','red'); //change border color red proceed = false; //set 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 red proceed = false; //set not proceed flag } }); because highlighting tripping out. should highlighting name, email, phone, , message boxes
css padding issue
you have css code mistake placeholder. have missed line-height. have add line-hight:20px; in #contact input, select class. class in main.css file on near 842 line.
validation issue
on $("#submit_btn").click if alert value of user_name text box. gives 'name' value. validation getting true. try add bellow in $("#submit_btn").click , check :
alert($('#user_name').val()) or input alert
alert($(this).val())
Comments
Post a Comment