CODEWITHSUNDEEP
javascriptjqueryformsvalidationsubmit
Shirohige
Shirohige

Reputation: 100

jQuery validation plugin submits even if validation errors occur

I am trying to validate a bootstrap form with jQuery.

  var formSubmit =  $("#dl-mg-form-publish").validate({
        rules: {
            'dl-mg-input-youtube': {
                required: true,
                url:true,
            },
            'dl-mg-input-title': {
                required: true,
                minlength: 6   });

I am trying to validate this: 

 var videoInformation = {
        youtubeID: $('#dl-mg-input-youtube').val(),
        title: $('#dl-mg-input-title').val(), }

This is my html: 

  <form class="form-horizontal dl-mg-form-horizontal" id="dl-mg-form-publish"  action="#">


    <div class="form-group">
        <label for="dl-mg-input-youtube" class="control-label col-xs-2">YouTube Video ID:</label>

        <div class="col-xs-6">
            <input type="url" class="form-control" id="dl-mg-input-youtube" name="dl-mg-input-youtube" placeholder="Youtube ID">

        </div>

    </div>

    <div class="form-group">
        <label for="dl-mg-input-title" class="control-label col-xs-2">Video Title:</label>

        <div class="col-xs-6">
            <input type="text" class="form-control" id="dl-mg-input-title" name="dl-mg-input-title" placeholder="Video Title">

        </div>
    </div>

I am new at programming I don't know how to validate first and then submit. I tried using a .click handler but it submits the fields with errors anyway. Please help!

Upvotes: 1

Views: 576

Answers (1)

palaѕн
palaѕн

Reputation: 73906

Before submitting your form you need to validate the form. You can do this inside the click event like:

$("#target").click(function () {

    // Validate the form first
    if (!$("#dl-mg-form-publish").valid()) return false;

    // Your form is valid, so continue with you submit logic..
});

More info here: .valid()

EDIT:

Disable auto validation on keypress

Use this options for the validate() method:

$("#dl-mg-form-publish").validate({
     onfocusout: false,
     onkeyup: false,
     // other options here
})

Upvotes: 1

Related Questions