如何通过jquery验证插件实现我的验证?我无法验证我的表格?

时间:2010-09-06 20:19:01

标签: javascript jquery jquery-plugins

这是我的HTML页面..

<div>
<form id="signupForm" method="get" action="">
<table> 
  <tr><td><input type="button" value="New" onclick="clearuserfields()"/></td></tr>
 <tr><td>USERID:</td><td><input type="text" id="userID"/></td></tr>
 <tr><td>FNAME:</td><td><input type="text" id="fname" name="fname" /></td></tr>
 <tr><td>LNAME:</td><td><input type="text" id="lname" name="lname" /></td></tr>
 <tr><td>EMAIL:</td><td><input type="text" id="email" name="email" /></td></tr>
 <tr><td>PASSWORD:</td><td><input type="text" id="password" name="password" /></td></tr>
 <tr><td>PHONENO:</td><td><input type="text" id="phoneno" name="phoneno" /></td></tr>
 <tr><td>ROLL:</td><td><input type="text" id="roll" name="roll" /></td></tr>
 <td><input type="button" value="Save" onclick="initialiseusers()"/></td>
 <td><input type="button" value="Delete" onclick="deleteuser()"/></td> 
 </table>
 </form>
</div>
this is my JS page
function initialiseusers(){
$("#signupForm").validate({
    rules: {
        fname: "required",
        lname: "required",
        email:{
            required: true,
            email: true
        },
        password:{
            required: true,
            minlength: 5
        },
        phoneno:"required",
        roll:{
            required: true,
            minlength: 2
        },      
        messages: {
            fname:"Please enter your firstname",
            lname:"Please enter your lastname",
            email:"Please enter a valid email address",
            password:{
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },
            phoneno:"Please enter your phoneno",
            roll:"Please enter your role"
        }
    }
         updateusers();// when the validation is over this function being called for updating the user.
});

但验证不起作用,当我点击保存按钮时。它直接在我的数据库中保存空白值我下载了验证插件并将其添加到路径中。,有什么建议吗?

2 个答案:

答案 0 :(得分:1)

不确定验证插件的工作原理,但您可能需要从initialiseusers返回“false”,以防止发生默认表单提交。

答案 1 :(得分:1)

验证插件绑定到表单的submit事件,它并不意味着在线调用。而是设置验证,然后调用.valid()进行检查,如下所示:

$(function() {
  $("#signupForm").validate({
    rules: {
        fname: "required",
        lname: "required",
        email:{
            required: true,
            email: true
        },
        password:{
            required: true,
            minlength: 5
        },
        phoneno:"required",
        roll:{
            required: true,
            minlength: 2
        }
    },      
    messages: {
        fname:"Please enter your firstname",
        lname:"Please enter your lastname",
        email:"Please enter a valid email address",
        password:{
            required: "Please provide a password",
            minlength: "Your password must be at least 5 characters long"
        },
        phoneno:"Please enter your phoneno",
        roll:"Please enter your role"
    }
  });
});
function initialiseusers(){
  if($("#signupForm").valid())
    updateusers(); //called if successfully validated
}

You can test it here.validate() 设置验证,它不会执行它,.valid()会执行验证,如果成功则返回布尔值。