Why is jQuery Validation adding noValidate attribute?

Question

I'm currently using:

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="../js/bootStrap/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>

with validation such as:

j$('.delValidate').each(function(){

j$(this).validate({
    rules:{
        delivery_Method:{
            required: true
        }
    },
    message:{
        delivery_Method:{
            required: true
        }
    }
});

});

    j$('.validateUser').each(function(){
        j$(this).validate({
            rules:{
                f_Name:{
                    required: true
                },
                l_Name:{
                    required: true  
                },
                username:{
                    required: true,
                    minlength: 6
                },
                password: {
                    validChars: true,
                    noSpace: true,
                    minlength: 6,
                    skip_or_fill_minimum: [3,".pw"]
                },
                confPass: {
                    equalTo: "#password",
                    skip_or_fill_minimum: [3,".pw"]
                }           
            }
        });
    });

HTML snippet:

<form class="form-horizontal delValidate" action="#" method="post">
<input type="hidden" name="formIdentifier" value="addDel" />
<div class="form-group">
    <div class="col-sm-3">
        <input type="text" name="delivery_Method" class="form-control" placeholder="Enter new method" />
    </div>
    <div class="col-sm-2 col-sm-offset-2">
        <button type="submit"  class="btn btn-default btn-block">Add</button>
    </div>
</div>
</form>

But when I go to my page, My form is rendered with the attribute noValidate and therefore I can insert null/empty values into the database. What is the reasoning for this? Does the form have to be set up in a particular way? Does jQuery validation pick up something is wrong and therefore doesn't work? My dirty work around is using:

j$(this).removeAttr('novalidate');

Answer 1

The novalidate attribute simply tells the browser to disable the built-in HTML5 validation, or ignore any HTML5 validation attributes you may have used.

The jQuery Validate plugin dynamically adds the novalidate attribute because, by installing it, you've decided to let the plugin handle validation instead of HTML5.

Neither of those two methods, JavaScript (jQuery) or HTML5, are good enough for protecting your database. You should always have some kind of server-side validation in place for when client-side validation fails, is disabled, or bypassed by the user/browser.

Quote OP:

" My form is rendered with the attribute noValidate and therefore I can insert null/empty values into the database."

Sounds like something is very wrong with the way you're using the jQuery Validate plugin, and the novalidate attribute is not the root cause.

If it's critical that you cannot enter null data, you'll need data validation code on the server side to prevent this. You must never rely on client-side code to protect the database since all client-side code can be easily bypassed.

"What is the reasoning for this?"

As explained above. This is normal and desired. The plugin simply uses novalidate to take over client side validation from the browser (HTML5).

If you have no HTML5 validation attributes, then the novalidate attribute, or lack of novalidate attribute, does absolutely nothing. In other words, it only toggles the HTML5 validation if you use HTML5 validation attributes.

"Does the form have to be set up in a particular way?"

Yes. But we cannot see your markup to tell where you went wrong.

"My dirty work around is using: .removeAttr('novalidate')"

This is not smart, or completely superfluous, depending on your markup. Effectively, you are potentially allowing HTML5 validation to occur simultaneously with the jQuery Validate plugin. Pick one or the other for client-side validation.

---

EDIT:

The OP has since added some HTML markup to the question.

The jQuery Validate plugin is working exactly as expected: http://jsfiddle.net/tv7Bz/