两次执行表单验证器

Question

I have reviewed the database and have not seen how any comments apply specifically to my situation OR I am not genius enough to extend the knowledge.

I am using jQuery Form Validor: formvalidator.net

My head looks like this:

<link rel="stylesheet" href="../plugins/uniform/css/uniform.default.css" type="text/css"/>
<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="../plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<!--Monitoring Code-->
<script type="text/javascript" async="async" defer="defer" src="https://chat.banckle.com/chat/visitor.do?dep=72e029a3-64f6-4ffe-b7ea-13c0b3d70a8e"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.38/jquery.form-validator.min.js"></script>

<script>
$(function() {
    $('input,button,select,textarea').uniform();
    var myLanguage = {
      errorTitle : 'Please try again...',
      requiredFields : 'You have not answered all required fields',
      badTime : 'You have not given a correct time',
      badEmail : 'You have not given a correct e-mail address',
      badTelephone : 'You have not given a correct phone number',
      badSecurityAnswer : 'You have not given a correct answer to the security question',
      badDate : 'You have not given a correct date',
      lengthBadStart : 'You must give an answer between ',
      lengthBadEnd : ' characters',
      lengthTooLongStart : 'You have given an answer longer than ',
      lengthTooShortStart : 'You have given an answer shorter than ',
      notConfirmed : 'Values could not be confirmed',
      badDomain : 'Incorrect domain value',
      badUrl : 'The answer you gave was not a correct URL',
      badCustomVal : 'You gave an incorrect answer',
      badInt : 'The answer you gave was not a correct number',
      badSecurityNumber : 'Your social security number was incorrect',
      badUKVatAnswer : 'Incorrect UK VAT Number',
      badStrength : 'The password isn\'t strong enough',
      badNumberOfSelectedOptionsStart : 'You have to choose at least ',
      badNumberOfSelectedOptionsEnd : ' answers',
      badAlphaNumeric : 'The answer you gave must contain only alphanumeric characters ',
      badAlphaNumericExtra: ' and ',
      wrongFileSize : 'The file you are trying to upload is too large',
      wrongFileType : 'The file you are trying to upload is of wrong type',
      groupCheckedRangeStart : 'Please choose between ',
      groupCheckedTooFewStart : 'Please choose at least ',
      groupCheckedTooManyStart : 'Please choose a maximum of ',
      groupCheckedEnd : ' item(s)'
    };
    $.validate({
        form: '#contact-form',
        validateOnBlur: false,
        errorMessagePosition: 'top',
        scrollToTopOnError: true,
        language: myLanguage,
        onValidate: function() {
            $('.success-form,.form-error').remove();
        },
        onSuccess : function() {
            function processdata(data,success) {
                if (success) {
                    //document.getElementById('contact-form').reset();
                    //alert(data);
                    if (data=="good") {
                        $('#contact-form').prepend("<div class='success-form'>Your message has been sent. You will receive a response within the next 24 hours--or on the next business day.</div>");
                    } else {
                        $('#contact-form').prepend("<div class='form-error'>Unable to contact Genera Safety Inc at this time. Please try again.</div>");
                    }
                }
            }
            var formdata = $('#contact-form').serialize();
            processdata();
            //alert(formdata);
            $.post('process_contact_form.php',formdata,processdata);
            return false;
        }
    });
});
</script>

The form is submitting twice? Perhaps it is also validating twice?

Anyone see any issues here? I can provide further information if necessary...

Answer 1

The submit event is triggered twice here. I could not find any problem with your code. It seems that the issue is caused by jquery.uniform plugin. You can use the following code to test the plugin alone.

<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="//rawgithub.com/pixelmatrix/uniform/master/jquery.uniform.min.js" type="text/javascript"></script>

<script>
$(function(){
  $("form").submit(function(e) {
    e.preventDefault();
    console.log("form submit event triggered", Date.now());
  })

  $('input,button,select,textarea').uniform();
});
</script>

<form><input type="submit"/></form>

By removing $('input,button,select,textarea').uniform(); from your code, I was able to avoid the double submit issue.