jQuery Validate不验证表单提交

Question

我正面临jQuery验证的一些问题。我已经设置了规则，但是当我提交表单时，什么也没发生。

我正在使用ASP。. NET MVC 4和Visual Studio 2010.

编辑:点击这里查看我的完整代码。我试图在这里发布它，但我得到以下错误:403禁止:IPS签名匹配。下面是我在Andrei Dvoynos的建议下编写的部分代码。我得到了相同的错误。点击提交，页面被重新加载

@{
ViewBag.Title = "Index";
}
@section Teste1{
<script type="text/javascript">
        $(document).ready(function () {
        $("#moeda").maskMoney();
        $("#percent").maskMoney();
        $(":input").inputmask();
          $('#tel').focusout(function () {
            var phone, element;
            element = $(this);
            element.unmask();
            phone = element.val().replace(/D/g, '');
            if (phone.length > 10) {
                element.inputmask({ "mask": "(99) 99999-999[9]" });
            } else {
                element.inputmask({ "mask": "(99) 9999-9999[9]" });
            }
          }).trigger('focusout');
//the code suggested by Andrei Dvoynos, i've tried but it's occurring the same.
        $("#form1").validate({
          rules: {
             cpf: { required: true, },
             cep: { required: true, },
             tel: { required: true, },
             email: { required: true, },
             cnpj: { required: true, },
          },
          highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
          },
          unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error');
          },
          errorElement: 'span',
          errorClass: 'help-block'
        });            
    });
</script>
}
@using (@Html.BeginForm("", "", FormMethod.Post,
             new { id = "form1", name = "form1" }))
{
<fieldset>
    <legend>Sign In</legend>
    <div class="form-group" id="divCpf">
        <label for="cpf">CPF</label>
        <input data-inputmask="'mask': '999.999.999-99'" class="form-control" id="cpf" />
    </div>
    <div class="form-group" id="divCep">
        <label for="cep">CEP</label>
        <input data-inputmask="'mask' : '99999-999'" type="text" class="form-control" id="cep" placeholder="CEP" />
    </div>
    <div class="form-group" id="divTel">
        <label for="tel">Telefone</label>
        <input type="text" class="form-control" id="tel" placeholder="tel" />
    </div>
    <div class="form-group" id="email">
        <label for="email">Email</label>
        <input type="text" class="form-control" id="email" placeholder="Email" />
    </div>
    <div class="form-group" id="divcnpj">
        <label for="cnpj">CNPJ</label>
        <input data-inputmask="'mask' : '99.999.999/9999-99'" type="text" class="form-control" id="cnpj" placeholder="CNPJ" />
    </div>
    <div class="form-group">
        <label for="moeda">Moeda</label>
        <input type="text" id="moeda" data-allow-zero="true" class="form-control" />
    </div>
    <div class="form-group">
        <label for="Percent">Percent</label>
        <input type="text" id="percent" data-suffix="%" data-allow-zero="true" class="form-control" maxlength="7" />
    </div>
    <input type="submit" class="btn btn-default" value="Sign In" id="sign" />
</fieldset>
}

我的测试(全部不成功):

1 -将$("form").validate()放入$(document).ready()

2 -把required类放到场上。

jQuery Validate plugin version: 1.13.0

Answer 1

除了@Andrei修复的致命问题之外，您还有另一个致命缺陷。输入中缺少name属性。

• 每个元素必须包含一个唯一的name属性。这是插件的要求，因为它是如何跟踪每个输入的。

• name是在rules选项中声明规则的目标。

$("#form1").validate({
    rules: {    // <-  all rule declarations must be contained within 'rules' option
        cpf: {  // <-  this is the NAME attribute
            required: true,
        ....

演示:http://jsfiddle.net/3tLzh/

Answer 2

在调用验证函数时缺少rules属性，请尝试这样做:

$("#form1").validate({
    rules: {
        cpf: { required: true, },
        cep: { required: true, },
        tel: { required: true, },
        email: { required: true, },
        cnpj: { required: true, },
    },
    highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
    unhighlight: function (element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block'
    });