CODEWITHSUNDEEP
javascriptjqueryvalidation
StefanP
StefanP

Reputation: 865

Jquery validate custom css checkbox

Is there a way to validate the following checkbox ?

<form name="rmn-form" id="rmn-form" action="send.php" enctype="multipart/form-data" method="POST">
  <div class="row">
    <div class="col-md-12 col-xs-12">
      <div class="rmn-input-field">
        <label for="gdpr" class="checkbox-container"> Accept terms and conditions
          <input type="checkbox" checked="checked" id="gdpr" name="gdpr">
          <span class="checkmark"></span>
        </label>
      </div>
    </div>
  </div>

  <button type="submit" name="submit" id="submit-all" class="waves-effect waves-light btn submit-button pink mt-30">Send</button>
</form>

The checkbox is generated by https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

I have the following JSFiddle with my code with the bootstrap library and jquery.validate.min.js: http://jsfiddle.net/2837qdeu/

Upvotes: 0

Views: 270

Answers (3)

StefanP
StefanP

Reputation: 865

I added the following line in the js file and it worked just fine:

$("#rmn-form").validate({
    ignore: ':hidden:not(:checkbox)',
    ....
});

Upvotes: 0

cssyphus
cssyphus

Reputation: 40038

You also can take control of this yourself, as below:

 $("[name=submit]").click(function(){
    if ( $('#gdpr').is(':checked') ){
        alert('submit will proceed - checkbox is checked') //This alert not required, only added for demo
    }else{
        alert('Error - submit will not proceed');
        return false; //<== Here is the magic, along with checking that the box is checked
    }
 });

Revised jsFiddle

return false will stop the submit procedure, allowing you to display a message, or do some js wizardry, before returning control to the user.

Upvotes: 0

ellipsis
ellipsis

Reputation: 12152

Just change your input tag to the code below

<input type="checkbox" required="required" id="gdpr" name="gdpr">

It will check before submit that this checkbox must be checked.

Fiddle

Upvotes: 1

Related Questions