Проверка успешности проверки

Question

Вот мой код. Моя основная проблема заключается в том, что var validationbool запускает успешную работу, даже если действует только одно поле контактной формы, и все равно, если другие недействительны. Как я могу создать лучший контроль, чтобы var validationbool = true, только когда все элементы действительны.

$(document).ready(function() { 

    var validationBool = false; 

    $('#register-form').validate({ 
     rules: { 
      name: { 
        minlength: 3, 
        required: true 
       }, 
       email: { 
        required: true, 
        email: true 
       }, 
       phone: { 
        required: true, 
        minlength: 10 
       }, 
       country: { 
        required: true 
       }, 
       boat: { 
        required: true 
       }, 
       lat: { 
        required: true 
       }, 


       registration: { 
        required: true 
       }, 

       file: { 
        required: true 
       } 
     }, 
     highlight: function (element) { 
      $(element).closest('.control-group').removeClass('success').addClass('error'); 

      validationBool = false; 
     }, 
     success: function (element) { 
      element.text('').addClass('valid').closest('.control-group').removeClass('error').addClass('success'); 

      validationBool = true; 
     } 
    }); 

    $('#register-form').on('submit', function(e){ 
     e.preventDefault(); 
     if(validationBool){ 

      var theData = { 
       name: $('#name').val(), 
       phone: $('#phone').val(), 
       email: $('#email').val(), 
       country: $('#country').val(), 
       lat: $('#lat').val(), 
       lng: $('#lng').val(), 
       boat: $('#boat').val(), 
       registration: $('#registration').val(), 
       file: $('#file').val() 
      }; 

      $.ajax({ // ajax call starts 
       url: "functions/enroll.php", 
       type: 'post', 
       data: theData, 
       success: function(data) 
       { 
        swal("Your request has been recieved!", "We will contact you for confirmation soon", "success"); 
        document.getElementById('name').value='', 
        document.getElementById('phone').value='', 
        document.getElementById('email').value='', 
        document.getElementById('country').value='', 
        document.getElementById('lat').value='', 
        document.getElementById('lng').value='', 
        document.getElementById('boat').value='', 
        document.getElementById('file').value='', 
        document.getElementById('registration').value=''; 

       } 
      }); 
     } 
    }); 
}); 

Answer 1

Я бы использовал .valid() mehthod.

Это будет напечатано, как

var myForm = $("#register-form"); myForm.validate();

затем, вместо того, чтобы использовать переменную "validationBool", используйте

if (myForm.valid())

, чтобы проверить, если форма утверждена - это воля проверьте все поля.

Answer 2

Вот что я думал, что будет работать для вас с validate():

[Примечание: Это просто пример, который я использовал, и вы можете использовать аналогичный подход - Вы не должны явно использовать любой булево переменная, зная, можете ли вы отправить.

Заметьте, я использовал:

1. Invalidate Handler - обратный вызов для пользовательского кода, когда недопустимая форма отправлена. Вызывается с объектом события в качестве первого аргумента, а валидатор - вторым.
2. Submit Handler - Обратный звонок для обработки фактического представления, когда форма действительна. Возвращает форму как единственный аргумент. Заменяет отправку по умолчанию. Правильное место для отправки формы через Ajax после ее проверки.

Html код:

<form class="cmxform" id="commentForm" method="get" action="http://www.google.com"> 
    <fieldset> 
     <legend>Please provide your name, email address (won't be published) and a comment</legend> 
     <p> 
      <label for="cname">Name (required, at least 2 characters)</label> 
      <input id="cname" name="name" minlength="2" type="text" /> 
     </p> 
     <p> 
      <label for="cemail">E-Mail (required)</label> 
      <input id="cemail" type="email" name="email" /> 
     </p> 
     <p> 
      <label for="curl">URL (optional)</label> 
      <input id="curl" type="url" name="url" /> 
     </p> 
     <p> 
      <label for="ccomment">Your comment (required)</label> 
      <textarea id="ccomment" name="comment"></textarea> 
     </p> 
     <p> 
      <input class="submit" type="submit" value="Submit" /> 
     </p> 
    </fieldset> 
</form> 

JS код:

$("#commentForm").validate({ 
    rules: { 
     name: { 
      minlength: 3, 
      required: true 
     }, 
     email: { 
      required: true, 
      email: true 
     }, 
     phone: { 
      required: true, 
      minlength: 10 
     }, 
     country: { 
      required: true 
     }, 
     boat: { 
      required: true 
     }, 
     lat: { 
      required: true 
     }, 
     registration: { 
      required: true 
     }, 
     file: { 
      required: true 
     } 
    }, 
    invalidHandler: function (event, validator) { 
     var errors = validator.numberOfInvalids(); 
     /*Here you will get your errors 
      if (errors) { 
       var message = errors == 1 
        ? 'You missed 1 field. It has been highlighted' 
        : 'You missed ' + errors + ' fields. They have been highlighted'; 
       $("div.error span").html(message); 
       $("div.error").show(); 
     } else { 
      $("div.error").hide(); 
     }*/ 
     alert(errors); 
    }, 
    submitHandler: function (element) { 
     //Handler for submit action 
     //$(form).ajaxSubmit(); 
     alert("submit"); 
    } 
}); 

JSFiddle Link here