jQuery驗證插件將無法正常工作=提交類型=按鈕

我使用jQuery驗證插件，我發現here jQuery驗證插件將無法正常工作=提交類型=按鈕

我的問題是，在形式上，如果我改變從

提交按鈕

<input type="submit" value="Add" class="add" id="addbutton">

到

<input type="button" value="Add" class="add" id="addbutton">

形式不會驗證或工作。

我想使用button而不是submit，因爲如果用戶關閉了javascript，表單根本不會提交。它只會坐在那裏無所事事。

不知道如何解決這個問題，並使其工作時type="button"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
<title>jQuery validation plug-in - main demo</title> 

<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" /> 

<script src="../lib/jquery.js" type="text/javascript"></script> 
<script src="../jquery.validate.js" type="text/javascript"></script> 

<script type="text/javascript"> 
$.validator.setDefaults({ 
    submitHandler: function() { form.submit(); } 
}); 

$().ready(function() { 

    // validate signup form on keyup and submit 
    $("#signupForm").validate({ 


     rules: { 
      username: { 
       required: true, 
       minlength: 2 
      }, 
      password: { 
       required: true, 
       minlength: 5 
      }, 
      confirm_password: { 
       required: true, 
       minlength: 5, 
       equalTo: "#password" 
      }, 
      email: { 
       required: true, 
       email: true 
      }, 

     }, 
     messages: { 

      username: { 
       required: "Please enter a username", 
       minlength: "Your username must consist of at least 2 characters" 
      }, 
      password: { 
       required: "Please provide a password", 
       minlength: "Your password must be at least 5 characters long" 
      }, 
      confirm_password: { 
       required: "Please provide a password", 
       minlength: "Your password must be at least 5 characters long", 
       equalTo: "Please enter the same password as above" 
      }, 
      email: "Please enter a valid email address", 
      agree: "Please accept our policy" 
     } 
    }); 




}); 
</script> 

<style type="text/css"> 
#commentForm { width: 500px; } 
#commentForm label { width: 250px; } 
#commentForm label.error, #commentForm input.submit { margin-left: 253px; } 
#signupForm { width: 670px; } 
#signupForm label.error { 
    margin-left: 0px; 
    width: auto; 
    display: inline; 
} 
#newsletter_topics label.error { 
    display: none; 
    margin-left: 103px; 
} 
</style> 

</head> 
<body> 

<div id="main"> 

<p>Default submitHandler is set to display an alert into of submitting the form</p> 

<form class="cmxform" id="signupForm" method="post" action=""> 
    <fieldset> 
     <legend>Validating a complete form</legend> 

     <p> 

      <label for="username">Username</label> 
      <input id="username" name="username" /> 
      <label for="username"></label> 

     </p> 
     <p> 
      <label for="password">Password</label> 
      <input id="password" name="password" type="password" /> 
     </p> 
     <p> 
      <label for="confirm_password">Confirm password</label> 
      <input id="confirm_password" name="confirm_password" type="password" /> 
     </p> 
     <p> 
      <label for="email">Email</label> 
      <input id="email" name="email" type="email" /> 
     </p> 


     <p> 
      <input class="submit" type="submit" value="Submit"/> 
     </p> 
    </fieldset> 
</form> 

</div> 
</body> 
</html>

來源

2013-01-10 Norman

_「我想使用按鈕而不是提交，因爲如果用戶關閉了javascript，表單根本不會提交，它只會在那裏無所事事。」_〜如果這就是你想要的要在'沒有窗體或沒有按鈕等。 – Sparky

你可以試試這個方法

$('document').ready(function(){ 
    $('form').validate({ 
     rules: { 
      a: {required:true, minlength:2} 
     },  
     messages: { 
      a: {required: "enter your name!"}  
     }, 


    }); 
    $('#checkbut').click(function(){ 
     $("form").validate().element("#a"); 
    }); 
});

工作Demo

來源

2013-01-10 05:01:49 Sibu

我相信驗證插件實際執行驗證上提交表格。因此，你只需要使用JavaScript來點擊按鈕提交表單。事情是這樣的：

$('#commentForm input[type=button]').click(function(){ 
    $(this).closest('form').submit() 
});

附加：您還需要記住，按下回車鍵，同時關注任何形式的元素仍然會提交表單，除非您禁用，所以你只是刪除提交按鈕時，解決方案javascript被禁用不會涵蓋這種情況。

來源

2013-01-10 05:03:58 weexpectedTHIS

其實我不認爲窗體會被提交，除非用戶手動點擊按鈕。如果他們在專注於一個領域時確實擊中輸入，則不會發生任何事情。至少這就是我的測試形式正在做的事情。 – sarcastyx

當我這樣做，表單不會驗證關鍵了。 – Norman

jQuery驗證插件將無法正常工作=提交類型=按鈕

回答

相關問題