如何在提交之前验证输入字段，如果验证正常，则显示消息块

Question

enter link description here/*我尝试制作验证表单并提交后
消息显示成功块 我如何首先验证，然后如果验证 可以显示成功消息。 但是现在我只能在提交后看到成功块 验证

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

您可以使用模式标签在表单中执行此操作。

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

Answer 2

我已经修改了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();

 })
});