javascript - jQuery: Not able to uncheck checkbox after binding click event -
using jquery validation plugin basis, created function validate fields without use of form. function binds events form elements perform validation on-the-fly.
there few cases use of form tag not possible, hence function created.
everything seems working correctly except checkboxes uncheckable once checked second time.
please can let me know doing wrong.
<html> <head> <title></title> </head> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script> jquery(document).ready(function() { jquery('#submit').click(function(){ var options = { 'name' : { required: true }, 'email' : { required: true, email: true }, 'number' : { required: true, digits: true }, 'select' : { required: true }, 'select-multiple' : { required: true }, 'radio' : { required: true }, 'checkbox' : { required: true }, 'checkbox-single' : { required: true }, 'multiple-emails' : { required: true, multipleemails: true } }; if(customvalidation(options)){ alert('form validated!'); }else{ alert('form not validated!'); } }); }); function customvalidation(options, bindevents){ var fieldsvalid = true; bindevents = (typeof bindevents === 'undefined') ? true : bindevents; var errordiv = jquery('#errordiv'); jquery.each(options, function(elementidorname, rules){ var element = (jquery('#' + elementidorname).length) ? jquery('#' + elementidorname) : jquery('input[name=' + elementidorname + ']:first'); var elementtype = element.prop('type'); var elementname = element.prop('name'); var elementvalid = true; // first remove validation errors jquery('.error-' + elementname).hide(); jquery.each(rules, function(rule, ruleoption){ // required if(rule == 'required' && ruleoption == true){ // select if(elementtype && (elementtype.tolowercase() === 'select' || elementtype.tolowercase() === 'select-one' || elementtype.tolowercase() === 'select-mulitple')){ var val = element.val(); if(val && val.length > 0){ // nothing } else{ elementvalid = false; } } // checkbox , radio if((/radio|checkbox/i).test(elementtype)){ if(jquery('input[name=' + elementname + ']:checked').length > 0){ // nothing } else{ elementvalid = false; } } // text, email, number , textarea if(jquery.trim(element.val()).length > 0){ // nothing } else{ elementvalid = false; } if(!elementvalid){ fieldsvalid = false; if(jquery('.error-' + elementname).length == 0) { errordiv.append('<div class="error-' + elementname + '">' + elementname + '</div>'); } else{ jquery('.error-' + elementname).show(); } } } // email if(rule == 'email' && ruleoption == true){ if((/^[a-za-z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-za-z0-9](?:[a-za-z0-9-]{0,61}[a-za-z0-9])?(?:\.[a-za-z0-9](?:[a-za-z0-9-]{0,61}[a-za-z0-9])?)*$/).test(element.val())){ // nothing } else{ elementvalid = false; } if(!elementvalid){ fieldsvalid = false; if(jquery('.error-' + elementname).length == 0) { errordiv.append('<div class="error-' + elementname + '">' + elementname + '</div>'); } else{ jquery('.error-' + elementname).show(); } } } // number if(rule == 'number' && ruleoption == true){ if((/^-?(?:\d+|\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/).test(element.val())){ // nothing } else{ elementvalid = false; } if(!elementvalid){ fieldsvalid = false; if(jquery('.error-' + elementname).length == 0) { errordiv.append('<div class="error-' + elementname + '">' + elementname + '</div>'); } else{ jquery('.error-' + elementname).show(); } } } // digits if(rule == 'digits' && ruleoption == true){ if((/^\d+$/).test(element.val())){ // nothing } else{ elementvalid = false; } if(!elementvalid){ fieldsvalid = false; if(jquery('.error-' + elementname).length == 0) { errordiv.append('<div class="error-' + elementname + '">' + elementname + '</div>'); } else{ jquery('.error-' + elementname).show(); } } } // multiple emails if(rule == 'multipleemails' && ruleoption == true){ var emailsarr = element.val().replace(/\s/g, '').split(/,|;/); for(var = 0; < emailsarr.length; i++){ if((/^[a-za-z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-za-z0-9](?:[a-za-z0-9-]{0,61}[a-za-z0-9])?(?:\.[a-za-z0-9](?:[a-za-z0-9-]{0,61}[a-za-z0-9])?)*$/).test(emailsarr[i])){ // nothing } else{ elementvalid = false; } } if(!elementvalid){ fieldsvalid = false; if(jquery('.error-' + elementname).length == 0) { errordiv.append('<div class="error-' + elementname + '">' + elementname + '</div>'); } else{ jquery('.error-' + elementname).show(); } } } }); if(bindevents){ var currentoption = {}; currentoption[elementidorname] = rules; // bind events validate on fly switch(elementtype){ case 'text': case 'email': case 'number': case 'textarea': element.unbind('keyup.customvalidation-' + elementname).bind('keyup.customvalidation-' + elementname, function(e){ return customvalidation(currentoption, false); }); break; case 'radio': case 'checkbox': jquery('input[name=' + elementidorname + ']').each(function (){ jquery(this).unbind('click.customvalidation-' + elementname).bind('click.customvalidation-' + elementname, function(e){ return customvalidation(currentoption, false); }); }); break; case 'select': case 'select-one': case 'select-multiple': element.unbind('change.customvalidation-' + elementname).bind('change.customvalidation-' + elementname, function(e){ return customvalidation(currentoption, false); }); break; } } }); return fieldsvalid; } </script> <body> <div id="errordiv"> </div> <br /> <br /> <input type="text" name="name" id="name" /> <br /> <br /> <input type="email" name="email" id="email" /> <br /> <br /> <input type="number" name="number" id="number" /> <br /> <br /> <select name="select" id="select"> <option></option> <option>option 1</option> <option>option 2</option> <option>option 3</option> </select> <br /> <br /> <select name="select-multiple" id="select-multiple" multiple> <option></option> <option>option 1</option> <option>option 2</option> <option>option 3</option> <option>option 4</option> <option>option 5</option> <option>option 6</option> </select> <br /> <br /> <input type="radio" name="radio" />yes <input type="radio" name="radio" />no <br /> <br /> <input type="checkbox" name="checkbox" />yes <input type="checkbox" name="checkbox" />no <br /> <br /> <input type="checkbox" name="checkbox-single" id="checkbox-single" />no <br /> <br /> <textarea name="multiple-emails" id="multiple-emails"></textarea> <br /> <br /> <button id="submit">submit</button> </body> </html>
jquery(document).ready(function() { jquery('#submit').click(function() { var options = { 'name': { required: true }, 'email': { required: true, email: true }, 'number': { required: true, digits: true }, 'select': { required: true }, 'select-multiple': { required: true }, 'radio': { required: true }, 'checkbox': { required: true }, 'checkbox-single': { required: true }, 'multiple-emails': { required: true, multipleemails: true } }; if (customvalidation(options)) { alert('form validated!'); } else { alert('form not validated!'); } }); }); function customvalidation(options, bindevents) { /*** function based on jquery validation plugin v1.13.1 doesn't require <form> tag add custom validations in function required currently supported validations are: required - field cannot blank email - validates email address mutliple emails - validates mutliple email addresses number - validates decimal number digits - validates digits todo: equal validation allow specifying parent element checkbox , radio elements apply error class allow specifying custom error , success functions through function parameter , individual options ***/ var fieldsvalid = true; bindevents = (typeof bindevents === 'undefined') ? true : bindevents; var errordiv = jquery('#errordiv'); jquery.each(options, function(elementidorname, rules) { var element = (jquery('#' + elementidorname).length) ? jquery('#' + elementidorname) : jquery('input[name=' + elementidorname + ']:first'); var elementtype = element.prop('type'); var elementname = element.prop('name'); var elementvalid = true; // first remove validation errors jquery('.error-' + elementname).hide(); jquery.each(rules, function(rule, ruleoption) { // required if (rule == 'required' && ruleoption == true) { // select if (elementtype && (elementtype.tolowercase() === 'select' || elementtype.tolowercase() === 'select-one' || elementtype.tolowercase() === 'select-mulitple')) { var val = element.val(); if (val && val.length > 0) { // nothing } else { elementvalid = false; } } // checkbox , radio if ((/radio|checkbox/i).test(elementtype)) { if (jquery('input[name=' + elementname + ']:checked').length > 0) { // nothing } else { elementvalid = false; } } // text, email, number , textarea if (jquery.trim(element.val()).length > 0) { // nothing } else { elementvalid = false; } if (!elementvalid) { fieldsvalid = false; if (jquery('.error-' + elementname).length == 0) { errordiv.append('<div class="error-' + elementname + '">' + elementname + '</div>'); } else { jquery('.error-' + elementname).show(); } } } // email if (rule == 'email' && ruleoption == true) { if ((/^[a-za-z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-za-z0-9](?:[a-za-z0-9-]{0,61}[a-za-z0-9])?(?:\.[a-za-z0-9](?:[a-za-z0-9-]{0,61}[a-za-z0-9])?)*$/).test(element.val())) { // nothing } else { elementvalid = false; } if (!elementvalid) { fieldsvalid = false; if (jquery('.error-' + elementname).length == 0) { errordiv.append('<div class="error-' + elementname + '">' + elementname + '</div>'); } else { jquery('.error-' + elementname).show(); } } } // number if (rule == 'number' && ruleoption == true) { if ((/^-?(?:\d+|\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/).test(element.val())) { // nothing } else { elementvalid = false; } if (!elementvalid) { fieldsvalid = false; if (jquery('.error-' + elementname).length == 0) { errordiv.append('<div class="error-' + elementname + '">' + elementname + '</div>'); } else { jquery('.error-' + elementname).show(); } } } // digits if (rule == 'digits' && ruleoption == true) { if ((/^\d+$/).test(element.val())) { // nothing } else { elementvalid = false; } if (!elementvalid) { fieldsvalid = false; if (jquery('.error-' + elementname).length == 0) { errordiv.append('<div class="error-' + elementname + '">' + elementname + '</div>'); } else { jquery('.error-' + elementname).show(); } } } // multiple emails if (rule == 'multipleemails' && ruleoption == true) { var emailsarr = element.val().replace(/\s/g, '').split(/,|;/); (var = 0; < emailsarr.length; i++) { if ((/^[a-za-z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-za-z0-9](?:[a-za-z0-9-]{0,61}[a-za-z0-9])?(?:\.[a-za-z0-9](?:[a-za-z0-9-]{0,61}[a-za-z0-9])?)*$/).test(emailsarr[i])) { // nothing } else { elementvalid = false; } } if (!elementvalid) { fieldsvalid = false; if (jquery('.error-' + elementname).length == 0) { errordiv.append('<div class="error-' + elementname + '">' + elementname + '</div>'); } else { jquery('.error-' + elementname).show(); } } } }); if (bindevents) { var currentoption = {}; currentoption[elementidorname] = rules; // bind events validate on fly switch (elementtype) { case 'text': case 'email': case 'number': case 'textarea': element.unbind('keyup.customvalidation-' + elementname).bind('keyup.customvalidation-' + elementname, function(e) { return customvalidation(currentoption, false); }); break; case 'radio': case 'checkbox': jquery('input[name=' + elementidorname + ']').each(function() { jquery(this).unbind('click.customvalidation-' + elementname).bind('change.customvalidation-' + elementname, function(e) { console.log(e); return customvalidation(currentoption); }); }); break; case 'select': case 'select-one': case 'select-multiple': element.unbind('change.customvalidation-' + elementname).bind('change.customvalidation-' + elementname, function(e) { return customvalidation(currentoption, false); }); break; } } }); return fieldsvalid; }
Comments
Post a Comment