Как проверить поля ввода перед отправкой, и если проверка в порядке, показать блок сообщений

Question

введите описание ссылки здесь / * Я пытаюсь создать форму проверки и после отправки
сообщение показать блок успеха Как я могу проверить сначала, а затем, если проверка в порядке, показать сообщение об успехе.Но теперь я могу видеть только блок успеха после подтверждения подтверждения

$(document).ready(function() {
  ('#submit').on('click', function() {
    var first_name = $('#first-name').val();
    var last_name = $('#last-name').val();
    var textarea = $('#textarea').val();
    var email = $('#email').val();
    var company = $('#company').val();
    var submit_button = $('#submit').val();
    $(".error").remove();
    /*check first-name length*/
    if (first_name.length < 3) {
      $('#first- 
        name ').addClass('
        invalid ').after(' < span class = "error" > 
  Must be at least 3 characters < /span>');
      }
      else {
        $('#first-name').removeClass('invalid');
      }
      /*check last-name length*/
      if (last_name.length < 3) {
        $('#last- 
          name ').addClass('
          invalid ').after(' < span class = "error" 
 > Must be at least 3 characters < /span>');
        }
        else {
          $('#last-name').removeClass('invalid');
        }
        if (textarea.length < 3) {

 $('#textarea').addClass('invalid').after('<span 
            class = "error" > Must be at least 3 
 characters < /span>');
          }
          else {
            $('#textarea').removeClass('invalid');
          }
          if (email.length < 3) {
            /*check email length and check with 
  regexp*/

 $('#email').addClass('invalid').after('<span 
              class = "error" > Must be at least 3 
characters < /span>');
            }
            else {
              /*reg exp*/
              var regEx = /^(([^<>()\[\]\\.,;:\s@"]+ 

(. [^ <> () \ [] \.,;: \ S @ "] +) *) | (". +")) @ (([[0-9] {1,3}. [0-9] {1, 3}. [0-9] {1, 3}. [0-9] {1, 3}]) | (([a - zA - Z \ - 0 - 9] +.) + [a - zA - Z] {2,})) $ /; var validEmail = regEx.test (email); if (!validEmail) {

        $('#email').addClass('invalid').after('<span 
          class = "error" > Enter a valid email < 
/span>');
        }
      }
      if (company.length < 3) {
        /*check company fieled length*/

 $('#company').addClass('invalid').after('<span 
          class = "error" > Must be at least 3 
 characters < /span>');
        }
        else {
          $('#company').removeClass('invalid');
        }
        /*call submit*/
        $('#first_form').submit(function(e) {
          $('.success-message').fadeIn();
          $('.contact-form').fadeOut();
        })
        $('#first_form').submit()
      })
    `I want to submit form and show success message, if the dorm is valid
  });

Я не могу закончить последний блок, как проверить проверку перед отправкой

Я ожидаю, что перед отправкой форма проверит все поля в соответствии с моими действительными параметрами и, если всеполя действительны показать сообщение

Answer 1

Я изменил js, чтобы исправить проблему, дайте мне знать, если она работает.

$(document).ready(function() {
  $('#submit').on('click', function(e) {
    var first_name = $('#first-name').val();
    var last_name = $('#last-name').val();
    var textarea = $('#textarea').val(); 
    var email = $('#email').val();
    var company = $('#company').val(); 
    var submit_button = $('#submit').val();
    $(".error").remove();
    var invalid= false;



    if (first_name.length < 3) {
    invalid=true;
      $('#first-name').addClass('invalid').after('<span class="error">Must be at least 3 characters</span>');
    } else {
      $('#first-name').removeClass('invalid');
    }

    if (last_name.length < 3) {
    invalid=true;
      $('#last-name').addClass('invalid').after('<span class="error">Must be at least 3 characters</span>');
    } else {
      $('#last-name').removeClass('invalid');
    }

    if (textarea.length < 3) {
    invalid=true;
      $('#textarea').addClass('invalid').after('<span class="error">Must be at least 3 characters</span>');
    } else {
      $('#textarea').removeClass('invalid');
    }


    if (email.length < 3) {
    invalid=true;
      $('#email').addClass('invalid').after('<span class="error">Must be at least 3 characters</span>');
    } else {
      var regEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      var validEmail = regEx.test(email);

      if (!validEmail) {
    invalid=true;
        $('#email').addClass('invalid').after('<span class="error">Enter a valid email</span>');
      } 
    }


    if (company.length < 3) {
    invalid=true;
      $('#company').addClass('invalid').after('<span class="error">Must be at least 3 characters</span>');
    } else {
      $('#company').removeClass('invalid');
    }


  /*  var isFormValid = true; */

if(!invalid){
$('#first_form').submit(function() {
     /* var isFormValid = true; */

   })   
$('.success-message').fadeIn();      
      $('.contact-form').fadeOut();
   $('#first_form').submit()
}

e.preventDefault();

 })
});

Answer 2

Вы можете сделать это в форме, используя тег pattern.

<input type="text" id="regname" placeholder="name" maxlength="32" pattern="[A-Za-z\s]{1,32}" required/>
    <input type="text" id="regusername"placeholder="username" />
  <input type="password" id="regpassword" placeholder="password" required/>
  <input type="text" type="email" id="regemail"placeholder="email address" pattern="[A-Za-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required/>