Jquery验证不能正常工作

时间:2012-11-02 15:40:03

标签: jquery html validation

我一直试图让这个工作2天没有成功,尝试了所有教程,并查看实际工作的代码,但没有任何效果。

很可能它会很容易找到,但我的jquery知识非常有限。

问题是我无法使验证正常工作,之前它只能使用“Class = required email”属性对一个字段(电子邮件字段)起作用。然而,一个人也停止了工作。

  $(document).ready(function(){
$("#forumulier").validate({
    rules: {
            telephone: {
                required: true,
                digits: true,
                        },

            name: {
                required: true,
                    },

            surname: {
                required: true,
                    },

            email: {
                required: true,
                email: true,
                }
            },
    messages: {
            telephone: {
                digits: "* voer een geldig telefoon nummer in"
                },
            name: {
                required: "* dit veld is verplicht"
                },
            surname: {
                required: "* dit veld is verplicht"
                },
            email: { 
                required: "* voer een geldig email adres in"
                }
            }
        submitHandler: function(form){
            return false;
            }
});
})

------

<form id="formulier" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
            <div class="group">
            <label for="name" class="label">Naam*:</label>
            <input type="text" name="name"/>
            </div>

            <div class="group">
            <label for="surname" class="label">Achternaam*:</label>
            <input type="text" name="surname"/>
            </div>

            <div class="group">
            <label for="email" class="label">Email*:</label>
            <input type="text" name="email" />
            </div>

            <div class="group">
            <label for="telephone" class="label">Telefoon*:</label>
            <input type="text" id="telephone" name="telephone" />
            </div>

            <label for="extra" class="label">Opmerkingen:</label>
            <textarea class="small-area"></textarea>


            <div class="clear"></div>

            <button type="submit" class="send">Verzenden</button>
        </form>

感谢任何

3 个答案:

答案 0 :(得分:0)

 $(document).ready(function(){
$("#forumulier").validate({
    rules: {
            telephone: {
                required: true,
                digits: true
                        },

            name: {
                required: true
                    },

            surname: {
                required: true
                    },

            email: {
                required: true,
                email: true
                }
            },
    messages: {
            telephone: {
                digits: "* voer een geldig telefoon nummer in"
                },
            name: {
                required: "* dit veld is verplicht"
                },
            surname: {
                required: "* dit veld is verplicht"
                },
            email: { 
                required: "* voer een geldig email adres in"
                }
            },
        submitHandler: function(form){
            form.submit();
            }
});
});

看起来你的逗号太多了。您需要通过javascript调试器放置代码,以便在出现简单的语法错误时通知您。

答案 1 :(得分:0)

当您设置验证消息时,您需要为正在使用的每个验证设置一条消息:必需,日期,电子邮件等。

像这样。

messages: {
    telephone: {
        required: " your message here",
        digits: "* voer een geldig telefoon nummer in"

    },
    name: {
        required: "* dit veld is verplicht"
    },
    surname: {
        required: "* dit veld is verplicht"
    },
    email: { 
        required: "* voer een geldig email adres in",
        email: " your message here"
    }
},
submitHandler: function(form){
   form.submit();
}

这应该适用于你的例子。

更新.. 这是一个完整的例子。 我用过你的代码+我的。

<html>
<head>
    <title></title>
</head>
<body>
<form id="form" method="post" action="">
<div class="group">
<label for="name" class="label">Naam*:</label>
<input type="text" name="name"/>
</div>

<div class="group">
<label for="surname" class="label">Achternaam*:</label>
<input type="text" name="surname"/>
</div>

div class="group">
<label for="email" class="label">Email*:</label>
<input type="text" name="email" />
</div>

<div class="group">
<label for="telephone" class="label">Telefoon*:</label>
<input type="text" id="telephone" name="telephone" />
</div>

<label for="extra" class="label">Opmerkingen:</label>
<textarea class="small-area"></textarea>


<div class="clear"></div>

<input type="submit" class="send">
</form>​
<script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
    <script src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js'></script>
<script>
$(document).ready(function(){
$("#form").validate({
rules: {
telephone: {
required: true,
digits: true,
},
name: {
required: true,
},
surname: {
required: true,
},
email: {
required: true,
email: true,
}
},
messages: {
telephone: {
required: " your message here",
digits: "* voer een geldig telefoon nummer in"
},
name: {
required: "* dit veld is verplicht"
},
surname: {
required: "* dit veld is verplicht"
},
email: { 
required: "* voer een geldig email adres in",
email: " your message here"
}
},
submitHandler: function(form){
form.submit();
}
});
});          
</script>​​​​​​​​​​​​​​
</body>
</html>

查看您的提交按钮。你有按钮类型='提交'。当我使用它时,它不起作用。将其更改为input type ='submit'

答案 2 :(得分:0)

除了其他人用逗号指出的问题之外,你在调用的调用中只是拼错了formulier,所以它没有将验证代码附加到任何东西上(你用“for * u * mulier“)。

所以解决这个问题:

$("#formulier").validate({
    rules: {
        telephone: {
            required: true,
            digits: true
                    },

        name: {
            required: true
                },

        surname: {
            required: true
                },

        email: {
            required: true,
            email: true
            }
        },
    messages: {
        telephone: {
            digits: "* voer een geldig telefoon nummer in"
            },
        name: {
            required: "* dit veld is verplicht"
            },
        surname: {
            required: "* dit veld is verplicht"
            },
        email: { 
            required: "* voer een geldig email adres in"
            }
        },
    submitHandler: function(form){
        return false;
        }
});​​​​

删除了每个对象中最后一项的逗号。逗号在submitHandler之前添加。 forumulier已更改为formulier

现在看起来像这样:http://jsfiddle.net/ryleyb/Xn5YJ/