堆栈内存溢出
  简体   繁体   English

Javascript对输入更改进行验证，仅在单击“提交”按钮时提交

[英]Javascript Validate on input change, only submit when Submit button clicked

 原文  2012-03-02 17:07:42  8   3    javascript/ ajax/ jquery-validate/ validation

问题描述

I have a form on my site. 我的网站上有一个表格。 When the submit button is clicked, a function runs to get the contents of each field, validate the contents based on RegEx and other requirements, and then if everything looks fine, the form is submitted via Ajax to a .php mailer. 单击提交按钮后，将运行一个函数来获取每个字段的内容，根据RegEx和其他要求验证内容，然后，如果一切正常，则通过Ajax将表单提交给.php邮件程序。

I would like the form to validate automatically when the input field values change, OR when the input field loses focus (I have no preference, either would be great) AND THEN I would like the form to submit ONLY when the user clicks the Submit button on the form. 我希望表单在输入字段值更改时自动验证，或者在输入字段失去焦点时自动验证（我没有优先选择，两个都很好），然后我希望表单仅在用户单击“提交”按钮时提交在表格上。 If the user clicks the Submit button BEFORE all fields are valid, I do NOT want the form to submit. 如果用户在所有字段均有效之前单击“提交”按钮，则我不希望表单提交。

Here's my code: 这是我的代码： 

    //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;
    });

});

AND HERE IS THE HTML and PHP CODE FOR THE FORM 这是表单的HTML和PHP代码 

<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>

3 个解决方案

解决方案1
 0  2012-03-02 17:13:03

You should use some kind of validator plugin. 您应该使用某种验证器插件。 Personally I've used jquery tools form validator and it works great.. There are others as well. 我个人使用过jQuery工具的表单验证器，并且效果很好。 Check this: http://flowplayer.org/tools/validator/ 检查此： http : //flowplayer.org/tools/validator/

I also use a plugin that I built which will take a form and submit it via ajax, and there are some out there which work real similar to mine: 我还使用了我构建的插件，该插件将采用表单并通过ajax提交，并且其中有些插件的工作原理与我的相似：

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

Is one example. 就是一个例子。 This allows you to make the form in normal html and it will submit the form to the form's action url, and it will build the forms values the same way the browser would if you submitted without ajax. 这使您可以使用普通的html格式制作表单，并将表单提交到表单的操作url，并且将以与浏览器提交时没有ajax相同的方式构建表单值。 Thus, to whatever your backend script is the form fields submit just as if you hadn't used ajax. 因此，无论您的后端脚本是什么，表单字段都可以提交，就像您没有使用过ajax一样。

Since this seems like too much work for you, let me show you what your code looks like with and without it. 由于这对您来说似乎太多了，所以让我向您展示使用和不使用它的代码的样子。

Without (look above at your js). 没有（请看上面的js）。

No assuming your form looks like this (simplified) 不假设您的表单看起来像这样（简体） 

<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>

Now thats probably similar to what it looks like now without all the extra html for formatting. 现在多数民众赞成在可能与现在的样子相似，但没有用于格式化的所有额外html。

If you used both the validator and the ajax form validator you have to make hardly any changes. 如果同时使用了验证器和ajax表单验证器，则几乎不需要进行任何更改。 Let me show them. 让我给他们看。

With the validator and ajax form you would then have this: 使用验证器和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>

Then your js would be: 然后您的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' />");});}});
});

And any custom validators you make you can reuse on other forms.. 您制作的任何自定义验证器都可以在其他表单上重复使用。

And then you may need some custom error messages but that's it.. You can delete all that other js code you have. 然后您可能需要一些自定义错误消息，仅此而已。您可以删除所有其他js代码。

解决方案2
 0  2012-03-02 17:14:40

This is commonly achieved with the keyup function. 这通常是通过keyup功能实现的。 Whenever a key is released, a function can be called to make sure that all the fields are accurate, and if so, left the user know in an unobtrusive way. 每当释放键时，都可以调用一个函数以确保所有字段都是准确的；如果是，则以不干扰用户的方式让用户知道。 In your case, you could have the submit button disabled unless all the fields are correct. 就您而言，除非所有字段正确，否则都可以禁用“提交”按钮。

Note: You should never modify currently edited text fields with the function, or do anything else that will prove to be an annoyance to the user ;) 注意：切勿使用此功能修改当前编辑的文本字段，或做任何其他会使用户烦恼的事情；）

Edit: I modified the code to validate every time a key is lifted for all input fields. 编辑：我修改了代码，以在每次为所有输入字段提起键时进行验证。 I'm not fluent in JQuery, so I did it with vanilla Javascript. 我不太熟练使用JQuery，所以我用香草Javascript做到了。 If need be, it should be pretty easy to convert. 如果需要，应该很容易转换。 

$(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;
                          };
  });

解决方案3
 0  2012-03-03 00:58:36

I tend to break validation down for each input, which makes this stuff a lot easier. 我倾向于分解每个输入的验证，这使事情变得容易得多。 You could also use a jQuery plugin, which would probably be more modular in the long run. 您还可以使用jQuery插件，从长远来看，它可能会更加模块化。

That said, I would do it like this ( working jsFiddle ): 就是说，我会这样做（ 工作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;
    });
});

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 ValidateForm 如何在 JavaScript 中单击提交按钮时验证和显示文本 - ValidateForm How to validate and show text when submit button was clicked in JavaScript 在 JavaScript 中单击提交按钮时如何更改段落的文本 - How to change text of a paragraph when submit button is clicked in JavaScript 单击按钮时，单击提交类型输入 - Click a submit type input when a button is clicked 单击提交按钮时执行不相关的javascript - Unrelated javascript executes when submit button is clicked 单击提交按钮时如何验证超链接和复选框 - How to validate the hyper link and checkbox when submit button is clicked 在提交之前单击输入提交时，如何验证输入？ - How can I validate input when input submit is clicked prior to the submit happening? 仅在单击特定按钮后才提交 - Submit Only if a specific button is clicked 使用JavaScript验证使用form_tag的输入字段时，提交按钮停止在rails中工作 - Submit button stops working in rails when using javascript to validate input fields when using form_tag 如何验证更改中的输入字段并启用提交按钮 - how to validate input fields on change and enable submit button Javascript：如何在单击提交按钮时将隐藏的输入标签附加到表单中？ - Javascript: How to append hidden input tag into a form when submit button is clicked?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM