0

I'm facing some problems with jQuery Validate. I've already put the rules but when i'm submitting the form, nothing happens.

I'm using ASP.NET MVC 4 and Visual Studio 2010.

EDIT: Click here to see my entire code. I'm trying to post it here but i'm getting the following error: 403 Forbidden: IPS signature match. Below is part of my code with Andrei Dvoynos's suggestion. I'm getting the same error. Clicking on submit and the page being reloaded

@{
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>
}

My tests (all unsuccessful):

1 - put the $("form").validate() into $(document).ready()

2 - put the required class on the fields.

jQuery Validate plugin version: 1.13.0

5
  • Did you mean to paste some of your code in and forgot? Commented Aug 4, 2014 at 19:17
  • You have to put the validation inside the anonymous function passed as parameter to the ready() method. Commented Aug 4, 2014 at 19:18
  • Sorry guys, i'm trying to submit the remaining code, but i'm getting the error: "an error ocurred when submitting the edit" Commented Aug 4, 2014 at 19:21
  • Hey @ChrisBenseler. I've tried to do it, but the same happen. Commented Aug 4, 2014 at 19:28
  • It doesn't matter what you try because you broke the plugin by neglecting to contain all of your rules inside of the rules option. Then you should place your .validate() call within the DOM ready event handler function so that it's initialized on the form after the HTML is fully loaded. Commented Aug 4, 2014 at 23:27

2 Answers 2

1

In addition to the fatal problem you fixed thanks to @Andrei, you also have one more fatal flaw. The name attribute is missing from your inputs.

  • Every element must contain a unique name attribute. This is a requirement of the plugin because it's how it keeps track of every input.

  • The name is the target for declaring rules inside of the rules option.


$("#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/

Sign up to request clarification or add additional context in comments.

3 Comments

You just killed it. Thanks a lot!
Don't see how this is any different from my answer :) But glad its fixed, cheers.
Oh I see it now. His html code is also missing the name attribute! Heh, good catch
1

You're missing the rules property when calling the validate function, try something like this:

$("#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'
    });

4 Comments

+1, This is exactly correct. The key:value list of field names: validation methods must be contained within the rules option. Otherwise, the plugin is left broken and inoperable.
Hey @Andrei Dvoynos and @Sparky! Thanks for the suggestion, but the problem still happens.
Hey @VictorAlencarSantos, it wasn't a suggestion. Your posted code has rules outside of the rules option and that will break the plugin. If you're still having trouble, then something else is wrong.
Hello @Sparky. Sorry, pal! I've already corrected it (with the above code) and tried again, but no success. Is there something else I can show here to help in the problem solving?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.