Javascript 입력 변경시 유효성 확인, 제출 버튼 클릭시 제출

Question

내 사이트에 양식이 있습니다. 제출 버튼을 클릭하면 함수가 실행되어 각 필드의 내용을 가져 와서 RegEx 및 기타 요구 사항에 따라 내용의 유효성을 검사 한 다음 모든 것이 정상적으로 보일 경우 양식이 Ajax를 통해 .php 메일러로 제출됩니다.

양식이 입력 필드 값이 변경 될 때 자동으로 유효성을 검사하거나 입력 필드가 포커스를 잃을 때 (나는 기본 설정이 없거나 중대 할 때) 양식을 제출할 때만 양식을 제출하기를 원합니다. 사용자가 양식의 제출 단추를 클릭합니다. 모든 필드가 유효하기 전에 사용자가 제출 버튼을 클릭하면 양식을 제출하고 싶지 않습니다.

여기 내 코드입니다 :

//contact form validation 
$(function(){ 
    $('.error').hide(); 
    // hide error messages onchange 
    $("#contact-form").change(function(){ 
     $('.error').hide(); 
     $("label#name_error").hide(); 
     $("label#invalid_error").hide(); 
     $("label#email_error").hide(); 
     $("label#invalid_phone_error").hide(); 
     $("label#phone_error").hide(); 
     $("label#zip_error").hide(); 
    }); 

    // validate fields on click 
    $(".cool-button").click(function(){ 
     $('.error').hide(); 
     $("label#name_error").hide(); 
     $("label#invalid_error").hide(); 
     $("label#email_error").hide(); 
     $("label#invalid_phone_error").hide(); 
     $("label#phone_error").hide(); 
     $("label#zip_error").hide(); 

     var name=$("input#contact_name").val(); 
     var email=$("input#contact_email").val(); 
     var emailRegEx =/^([a-zA-Z0-9])(([a-zA-Z0-9])*([\._-])?([a-zA-Z0-9]))*@(([a-zA-Z0-9\-])+(\.))+([a-zA-Z]{2,4})+$/ 
     var phone=$("input#contact_phone").val(); 
     var phone=phone.replace(/\s+-/g, ""); 
     var phoneRegEx = /^(1-?)?\s?(\([2-9]\d{2}\)|\s?-?[2-9]\d{2})-?\s?[2-9]\d{2}-?\d{4}$/ 
     var zip=$("input#contact_zip").val(); 
     var best_time=$("input#contact_best_time").val(); 
     var message=$("textarea#contact_message").val(); 
     var timestamp=$("input#timestamp").val(); 

     if(name==""){ 
      $("label#name_error").show(); 
      $("input#contact_name").focus();return false; 
      } 
     if(email==""){ 
      $("label#email_error").show(); 
      $("input#contact_email").focus();return false; 
      } 
     if (document.getElementById('contact_email').value.search(emailRegEx)==-1) { 
      $("label#invalid_error").show(); 
      $("input#contact_email").focus();return false; 
      } 
     if(phone==""){ 
      $("label#phone_error").show(); 
      $("input#contact_phone").focus();return false; 
      } 
     if (document.getElementById('contact_phone').value.search(phoneRegEx)==-1) { 
      $("label#invalid_phone_error").show(); 
      $("input#contact_phone").focus();return false; 
      } 
     if(zip==""){ 
      $("label#zip_error").show(); 
      $("input#contact_zip").focus();return false; 
      } 
     if(message==""){ 
      $("label#message_error").show(); 
      $("textarea#contact_message").focus();return false; 
      } 
     else { 
var dataString='contact_name='+name+'&contact_email='+email+'&contact_phone='+phone+'&contact_zip='+zip+'&contact_best_time='+best_time+'&timestamp='+timestamp+'&contact_message='+encodeURIComponent(message); 
    $.ajax({ 
     type:"POST", 
     url:"php/contact.php", 
     data:dataString, 
     success:function(){$('#contact-form').html("<div id='message'></div>");$('#message').html("<h3>Message Sent</h3>").append("<p>Thank you for contacting us. We'll be in touch. <br /><br />If you have any further questions, you can always email us at info@wirecrafters.com or call us at 800-924-9473</p>").hide().fadeIn(800,function(){$('#message').append("<img id='checkmark' src='images/submit2.png' />");});}}); 
     } 
     return false; 
    }); 

}); 

여기에 양식

<form id="contact-form" method="post" action="#"> 
          <p class="form-subscr-field"> 
          <label for="contact_name" id="contact_name_label">Your name: *</label> 
          <input id="contact_name" type="text" name="contact_name" class="inputbox" size="10" required/> 
          <label class="error error-tip" for="contact_name" id="name_error" style="display: none; ">Please enter your name.</label> 
          </p> 
          <p class="form-subscr-field"> 
          <label for="contact_email" id="contact_email_label">E-mail Address: *</label> 
          <input id="contact_email" type="email" name="contact_email" class="inputbox" size="10" required/> 
          <label class="error error-tip" for="contact_email" id="email_error" style="display: none; ">Please enter your email address.</label> 
          <label class="error error-tip" for="contact_email" id="invalid_error" style="display: none; ">Invalid email address.</label> 
          </p> 
          <fieldset class="w50"> 
          <p class="form-subscr-field rowElem left"> 
          <label for="contact_phone" id="contact_phone_label">Phone: *</label> 
          <input id="contact_phone" type="tel" name="contact_phone" class="inputbox" size="10" required minlength="9"/> 
          <label class="error error-tip" for="contact_phone" id="phone_error" style="display: none; ">Please enter your phone number.</label> 
          <label class="error error-tip" for="contact_phone" id="invalid_phone_error" style="display: none; ">Please enter a valid phone number.</label> 
          </p> 
          </fieldset> 
          <fieldset class="w50"> 
          <p class="form-subscr-field rowElem right"> 
          <label for="contact_zip" id="contact_zip_label">Zip Code: *</label> 
          <input id="contact_zip" type="text" name="contact_zip" class="inputbox" size="10" required minlength="5"/> 
          <label class="error error-tip" for="contact_zip" id="zip_error" style="display: none; ">Please enter your shipping zip code.</label> 
          </p> 
          </fieldset> 
          <p class="form-subscr-field"> 
          <label for="contact_best_time" id="contact_best_time_label">Best time to Contact:</label> 
          <input id="contact_best_time" type="text" name="contact_best_time" class="inputbox" size="10" /> 
          </p> 
          <p class="form-subscr-field"> 
          <label for="contact_message" id="comment_label">Your message: *</label> 
          <textarea id="contact_message" name="contact_message" rows="8" cols="30" required minlength="2"></textarea> 
          <label class="error error-tip" for="contact_message" id="message_error" style="display: none; ">This field is required.</label> 
          </p> 
          <input type="hidden" id="timestamp" name="timestamp" value="<?php 
$hourdiff = "2"; // hours diff btwn server and local time 
$insertdate = date("l, d F Y h:i a",time() + ($hourdiff * 3600)); 
print ("$insertdate"); 
?>" /> 
          <div class="submit-contact"> 
          <p> 
           <input type="submit" name="submit" class="cool-button csbutton-color spot-action" id="contact_button" value="Submit" /> 
          </p> 
          </div> 
         </form> 

Answer 1

당신은 검증 플러그인의 어떤 종류를 사용해야에 대한 HTML과 PHP 코드입니다. 개인적으로 나는 jquery 도구를 validator 형식으로 사용했으며 훌륭한 결과를 얻었습니다. 다른 것들도 있습니다. 이 옵션을 선택합니다 : http://flowplayer.org/tools/validator/

나는 또한 내가 형태를 취할와 아약스를 통해 제출, 거기에 약간의 거기 밖으로 내에 실제 비슷한 일을하는 것이다 내장 플러그인을 사용

:

http://jquery.malsup.com/form/

하나의 예입니다. 이렇게하면 일반 html로 양식을 만들 수 있으며 양식의 작업 URL에 양식을 제출하고 아약스없이 제출 한 경우 브라우저와 동일한 방식으로 양식 값을 작성합니다. 따라서 백엔드 스크립트가 무엇이든 아약스를 사용하지 않은 것처럼 양식 필드가 제출됩니다.

이 코드는 너무 많은 작업으로 보이므로 코드의 유무에 관계없이 코드의 모습을 보여 드리겠습니다.

(귀하의 j를 살펴보십시오.)

없음 가정 양식

이 (간체)과 같은

<form method="POST" action="php/contact.php"> 
    <label for="contact_name">Name</label> 
    <input name="contact_name" id="contact_name" /> 
    <br /> 
    <label for="contact_email">Email</label> 
    <input name="contact_email" id="contact_email" /> 
    <br /> 
    <label for="contact_phone">Phone</label> 
    <input name="contact_phone" id="contact_phone" /> 
    <br /> 
    <label for="contact_zip">Zip</label> 
    <input name="contact_zip" id="contact_zip" /> 
    <br /> 
    <label for="contact_best_time">Best time for Contact</label> 
    <input name="contact_best_time" id="contact_best_time" /> 
    <br /> 
    <label for="contact_message">Message:</label> 
    <input name="contact_message" id="contact_message" /> 
</form> 

지금은 형식에 대한 모든 여분의 HTML없이 지금의 모습에 아마 비슷한 이잖아.

유효성 검사기와 ajax 양식 검사기를 모두 사용한 경우 변경 사항을 거의 작성하지 않아야합니다. 보여 드리죠.

<form method="POST" action="php/contact.php" class="use-validator ajax-form"> 
    <label for="contact_name">Name</label> 
    <input name="contact_name" id="contact_name" /> 
    <br /> 
    <label for="contact_email">Email</label> 
    <input name="contact_email" id="contact_email" type="email" required="required" /> 
    <br /> 
    <label for="contact_phone">Phone</label> 
    <input name="contact_phone" id="contact_phone" type="phone" /> 
    <br /> 
    <label for="contact_zip">Zip</label> 
    <input name="contact_zip" id="contact_zip" required="required" /> 
    <br /> 
    <label for="contact_best_time">Best time for Contact</label> 
    <input name="contact_best_time" id="contact_best_time" required="required" /> 
    <br /> 
    <label for="contact_message">Message:</label> 
    <textarea name="contact_message" id="contact_message" required="required"></textarea> 
</form> 

이 그런 다음 JS은 다음과 같습니다 :

$.tools.validator.fn("[type=phone]", "Invalid phone number", function(input, value) { 
    var phoneRegEx = /^(1-?)?\s?(\([2-9]\d{2}\)|\s?-?[2-9]\d{2})-?\s?[2-9]\d{2}-?\d{4}$/ 
    return value.test(phoneRegEx); 
}); 

$("form.use-validator").validator(); 

$("form.ajax-form").ajaxForm({ 
success:function(){$('#contact-form').html("<div id='message'></div>");$('#message').html("<h3>Message Sent</h3>").append("<p>Thank you for contacting us. We'll be in touch. <br /><br />If you have any further questions, you can always email us at info@wirecrafters.com or call us at 800-924-9473</p>").hide().fadeIn(800,function(){$('#message').append("<img id='checkmark' src='images/submit2.png' />");});}}); 
}); 

을 그리고 사용자 정의 당신이 다른 형태에 재사용 할 수 있도록 유효성 검사기 .. 발리와 아약스 형태로

그런 다음이있을 것

사용자 정의 오류 메시지가 필요할 수도 있지만 그게 전부입니다. 다른 js 코드는 모두 삭제할 수 있습니다.

Answer 2

이것은 일반적으로 keyup 기능으로 달성됩니다. 키를 놓을 때마다 모든 필드가 정확한지 확인하기 위해 함수를 호출 할 수 있습니다. 그렇다면 사용자는 눈에 띄지 않게 알 수 있습니다. 귀하의 경우 모든 필드가 정확하지 않으면 제출 버튼이 비활성화 될 수 있습니다.

참고 :이 기능으로 현재 편집 텍스트 필드를 수정하지 않거나 사용자에게 불쾌감 것을 입증 할 것이다 다른 작업을 수행해서는 안)

---

편집 : 나는 모든 유효성을 검사하는 코드를 수정 모든 입력 필드에 대해 키가 해제 된 시간. JQuery에 익숙하지 않아서 바닐라 자바 ​​스크립트로 처리했습니다. 필요한 경우 변환이 매우 쉬워야합니다.

$(function(){ 


    var inputs = document.getElementsByTagName("input"); 

    for(var i = 0; i < inputs.length; i++) { 

    inputs[i].addEventListener("keyup", function(){validate()}, true); 

    } 


    $('.error').hide(); 
    $(".cool-button").click(function(){validate()}); 

    function validate() { 
          $('.error').hide(); 
          $("label#name_error").hide(); 
          $("label#invalid_error").hide(); 
          $("label#email_error").hide(); 
          $("label#invalid_phone_error").hide(); 
          $("label#phone_error").hide(); 
          $("label#zip_error").hide(); 

          var name=$("input#contact_name").val(); 
          var email=$("input#contact_email").val(); 
          var emailRegEx =/^([a-zA-Z0-9])(([a-zA-Z0-9])*([\._-])?([a-zA-Z0-9]))*@(([a-zA-Z0-9\-])+(\.))+([a-zA-Z]{2,4})+$/ 
          var phone=$("input#contact_phone").val(); 
          var phone=phone.replace(/\s+-/g, ""); 
          var phoneRegEx = /^(1-?)?\s?(\([2-9]\d{2}\)|\s?-?[2-9]\d{2})-?\s?[2-9]\d{2}-?\d{4}$/ 
          var zip=$("input#contact_zip").val(); 
          var best_time=$("input#contact_best_time").val(); 
          var message=$("textarea#contact_message").val(); 
          var timestamp=$("input#timestamp").val(); 

          if(name==""){ 
          $("label#name_error").show();$("input#contact_name").focus();return false; 
          } 
          if(email==""){ 
          $("label#email_error").show();$("input#contact_email").focus();return false; 
          } 
          if (document.getElementById('contact_email').value.search(emailRegEx)==-1) { 
          $("label#invalid_error").show();$("input#contact_email").focus();return false; 
          } 
          if(phone==""){ 
          $("label#phone_error").show();$("input#contact_phone").focus();return false; 
          } 
          if (document.getElementById('contact_phone').value.search(phoneRegEx)==-1) { 
          $("label#invalid_phone_error").show();$("input#contact_phone").focus();return false; 
          } 
          if(zip==""){ 
          $("label#zip_error").show();$("input#contact_zip").focus();return false; 
          } 
          if(message==""){ 
          $("label#message_error").show();$("textarea#contact_message").focus();return false; 
          } 
          else { 
          var dataString='contact_name='+name+'&contact_email='+email+'&contact_phone='+phone+'&contact_best_time='+best_time+'&contact_zip='+zip+'&timestamp='+timestamp+'&contact_message='+encodeURIComponent(message); 
          $.ajax({ 
           type:"POST", 
           url:"php/contact.php", 
           data:dataString, 
           success:function(){$('#contact-form').html("<div id='message'></div>");$('#message').html("<h3>Message Sent</h3>").append("<p>Thank you for contacting us. We'll be in touch. <br /><br />If you have any further questions, you can always email us at info@wirecrafters.com or call us at 800-924-9473</p>").hide().fadeIn(800,function(){$('#message').append("<img id='checkmark' src='images/submit2.png' />");});}}); 
          } 
          return false; 
          }; 
    }); 

Answer 3

각 입력마다 유효성 검사를 중단하는 경향이 있습니다. 장기적으로 볼 때 더 모듈화 된 jQuery 플러그인을 사용할 수도 있습니다. 말했다

,이 같은 (working jsFiddle를) 그것을 할 것입니다 :

//contact form validation 
$(function() { 
    $('.error').hide(); //hide all errors 
    function fieldHasValue(field, label) { 
     var value = field.val().trim(); //Grab value without leading or trailing whitespace 
     if (value.length > 0) { 
      label.hide(); 
     } else { 
      label.show(); 
      field.focus(); 
     } 
     return (value.length > 0); 
    } 
    function nameIsValid() { 
     return fieldHasValue($("input#contact_name"), $("label#name_error")); 
    } 
    function emailIsValid() { 
     var email = $("input#contact_email").val().trim(); //Grab value without leading or trailing whitespace 
     var emailRegEx = /^([a-zA-Z0-9])(([a-zA-Z0-9])*([\._\-])?([a-zA-Z0-9]))*@(([a-zA-Z0-9\-])+(\.))+([a-zA-Z]{2,4})+$/; 
     var isValid = (email.length > 0) && email.match(emailRegEx); 
     if (isValid) { 
      $("label#email_error").hide(); 
      $("label#invalid_error").hide(); 
     } else if (email.length > 0) { 
      $("label#invalid_error").show(); 
      $("input#contact_email").focus(); 
     } else { 
      $("label#email_error").show(); 
      $("input#contact_email").focus(); 
     } 
     return isValid; 
    } 
    function phoneIsValid() { 
     var phone = $("input#contact_phone").val().replace(/\s+-/g, "").trim(); //Grab value without leading or trailing whitespace and replace [whitespace -] with an empty string. 
     var phoneRegEx = /^(1-?)?\s?(\([2-9]\d{2}\)|\s?-?[2-9]\d{2})-?\s?[2-9]\d{2}-?\d{4}$/; 
     var isValid = (phone.length > 0) && phone.match(phoneRegEx); 
     if (isValid) { 
      $("label#invalid_phone_error").hide(); 
      $("label#phone_error").hide(); 
     } else if (phone.length > 0) { 
      $("label#invalid_phone_error").show(); 
      $("input#contact_phone").focus(); 
     } else { 
      $("label#phone_error").show(); 
      $("input#contact_phone").focus(); 
     } 
     return isValid; 
    } 
    function zipIsValid() { 
     return fieldHasValue($("input#contact_zip"), $("label#zip_error")); 
    } 
    function messageIsValid() { 
     return fieldHasValue($("textarea#contact_message"), $("label#message_error")); 
    } 
    function bestTimeIsValid() { 
     return fieldHasValue($("input#contact_best_time"), $("label#best_time_error")); 
    } 
    function allInputsAreValid() { 
     var validName = nameIsValid(); 
     var validEmail = emailIsValid(); 
     var validPhone = phoneIsValid(); 
     var validZIP = zipIsValid(); 
     var validMessage = messageIsValid(); 
     var validBestTime = bestTimeIsValid(); 
     var isValid = validName && validEmail && validPhone && validZIP && validMessage && validBestTime; 
     return isValid; 
    } 
    $("input#contact_name").on('change blur', nameIsValid); 
    $("input#contact_email").on('change blur', emailIsValid); 
    $("input#contact_phone").on('change blur', phoneIsValid); 
    $("input#contact_zip").on('change blur', zipIsValid); 
    $("textarea#contact_message").on('change blur', messageIsValid); 
    $("input#contact_best_time").on('change blur', bestTimeIsValid); 
    $("input#contact_button").on('click', function (e) { 
     var timestamp = $("input#timestamp").val(); 

     if (allInputsAreValid()) { 
      var dataString = 'contact_name=' + name + '&contact_email=' + email + '&contact_phone=' + phone + '&contact_zip=' + zip + '&contact_best_time=' + best_time + '&timestamp=' + timestamp + '&contact_message=' + encodeURIComponent(message); 
      $.ajax({ 
       type: "POST", 
       url: "php/contact.php", 
       data: dataString, 
       success: function() { 
        $('#contact-form').html("<div id='message'></div>"); 
        $('#message').html("<h3>Message Sent</h3>").append("<p>Thank you for contacting us. We'll be in touch. <br /><br />If you have any further questions, you can always email us at info@wirecrafters.com or call us at 800-924-9473</p>").hide().fadeIn(800, function() { 
         $('#message').append("<img id='checkmark' src='images/submit2.png' />"); 
        }); 
       } 
      }); 
     } 
     e.preventDefault(); 
     return false; 
    }); 
});