Question

我正在尝试禁用登录表单，以便在提交给服务器之前快速验证用户数据。我目前的代码工作得很好;但我现在面临的问题是，我需要点击提交按钮2次才能提交表格。我目前的代码是：

$('#login-submit').click(function() {
  var nameId = '#' + $(this).attr('name');      // Form name
  submitForm(nameId);
});

function submitForm(nameId) {   
  var formId = nameId + '-form';        // Form id
  var email = nameId + '-email';        // Email
  var pwd = nameId + '-pwd';        // Password
  var btn = nameId + '-submit';     // Submit button

  $(formId).submit(function() { return false; });
  alert('click1');
  $(btn).on('click', function() {
    alert('click2');
    var emailVal = $(email).val();
    var pwdVal = $(pwd).val();

    /*alert(emailVal + " " + pwdVal);*/
    var isEmailValid = validateEmail(emailVal);
    var isPwdcValid = validatePwd(pwdVal);

    // Validate email
    if(!isEmailValid) { 
      $(email).addClass('error');
      $(email + '-error').show();
    } else {    
      $(email).removeClass('error');
      $(email + '-error').hide();
    }

    // Validate password
    if(!isPwdcValid) {
      $(pwd).addClass('error');
      $(pwd + '-error').show();
    } else {     
      $(pwd).removeClass('error');  
      $(pwd + '-error').hide();
    }

    if(isEmailValid && isPwdcValid) {
      $(btn).replaceWith("<em>sending...</em>");
      var urlId = $(formId).attr('action');

      $.ajax({
        type: 'POST',
        url: urlId,
        data: $(formId).serialize(),
        success: function(data) {}
      });
    }
  }
}

第一次单击“提交”按钮时，它会提示“click1”而不是“click2”。如果我再次单击该按钮，它将提示“click2”。如果单击一下按钮，我该怎么做才能获得“click2”的警报？

Answer 1

根据您的代码，您正在对一个表单进行验证，您不需要调用两个事件

尝试以下代码以获得更好的

HTML部分

 <span id="loginemail-error" style="display:none">email not valid</span>
 <span id="loginpwd-error" style="display: none">password not valid</span>
 <form name="myfrom" id="myform" method="post">
    Email: <input type="text" name="loginemail" />
    Password: <input type="password" name="loginpwd"/>
    <input type="submit" name="login" id="login" value="Login"/>
 </form>

脚本部分

<script type="text/javascript">
$(document).ready(function(){

    $("#myform").on("submit",function(event){

        var $form = $(this);
        var values = {};
        hideError("loginemail");
        hideError("loginpwd");
        var err =false;
            $.each($form.serializeArray(), function(i, field) {
                            values[field.name] = field.value; // By you can access all field value by their name attribute
            });

           // alert(values.loginemail+" "+values.loginpwd);

            var emailVal = values.loginemail;
            var pwdVal   = values.loginpwd;

            var isEmailValid = validateEmail(emailVal);
            var isPwdcValid = validatePwd(pwdVal);

            if(!isEmailValid) 
            {
                showError("loginemail");
                err = true;
            }
            if(!isPwdcValid)
            {
                showError("loginpwd");
                err = true;
            }
            else
            {
                //youre ajax code
                err = false;
            }
           if(err)
           {
               return false;
           }
           else
           {
               return true;
           } 
    })

     function showError(fieldName)
     {
         $("input[name="+fieldName+"]").addClass('error');
         $("#"+fieldName+"-error").show();
     }
     function hideError(fieldName)
     {
         $("input[name="+fieldName+"]").removeClass('error');
         $("#"+fieldName+"-error").hide();
     }

     function validateEmail(emailVal)
     {
         alert(emailVal);
         if(emailVal==="myemail@gmail.com")
         {
             return true;
         }
         else
         {
             return false;
         }    
     }
     function validatePwd(pwdVal)
     {
          alert(pwdVal);
         if(pwdVal==="123456")
         {
             return true;
         }
         else
         {
             return false;
         }    
     }

})

</script>

jQuery禁用表单来验证数据

1 个答案: