Question

我遇到了jQuery Validate的一些问题。我已经提出了规则，但是当我提交表单时，没有任何反应。

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

编辑：Click here查看我的整个代码。我试图在此发布，但我收到以下错误：403 Forbidden：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插件版本：1.13.0

Answer 1

调用验证函数时，您错过了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'
    });

Answer 2

除了你在@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,
        ....

DEMO：http://jsfiddle.net/3tLzh/

jQuery验证不在表单提交上验证

2 个答案: