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

Posted 2023-05-09

【中文标题】如何在提交之前验证输入字段，如果验证正常，则显示消息块

【英文标题】：How to validate input fields before the submit and if the validation is ok, show message block

【发布时间】：2019-10-11 22:30:25

【问题描述】：

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

我无法完成最后一个块如何在提交前检查验证

我希望在提交之前，表单根据我的有效参数检查所有字段，如果所有字段都有效，则显示消息

【参考方案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/>

【参考方案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();

 )
);