Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I've run into similar issues. I solved them by removing the action and method of the form prior to validation and then adding them back in after validation. Here is the validator I wrote:</p> <pre><code>var Validator = function (formSelector) { this.formSelector = formSelector; // $(formSelector).submit(function() {return false;}); this.Action = $(formSelector).attr("action"); this.Method = $(formSelector).attr("method"); $(formSelector).attr("action",function(){return ""}).attr("method",function(){return ""}); var donotsubmit = false; var notjustcheckbox = false; var checknotchecked = false; this.Required = new Array(); this.Email = new Array(); this.validate = function () { this.form = $(this.formSelector); var i = 0; for (i in this.Required){ $(this.Required[i]).attr("value", function(index,attr){ // Check on checkboxes... if (this.getAttribute("type") == "checkbox"){ if (this.checked == false){ checknotchecked = true; donotsubmit = true; } else { } } else { if (attr == "" || attr == undefined){ this.style.border = "1px solid red"; notjustcheckbox = true; donotsubmit = true; } else { this.style.border = "1px solid green"; } } }); } i = 0; for (i in this.Email){ $(this.Email[i]).attr("value", function(index,email){ var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i ; if (filter.test(email) == true || filter.test(email) == "true") { this.style.border = "1px solid green"; } else if (filter.test(email) == false) { donotsubmit = true; notjustcheckbox = true; this.style.border = "1px solid red"; } }); } if (donotsubmit == true){ if (checknotchecked == true &amp;&amp; notjustcheckbox == true){ alert("Please correct the fields in red and check the required checkboxes"); } else if (checknotchecked == true &amp;&amp; notjustcheckbox == false){ alert("Please check the required checkboxes"); } else { alert("Please correct the fields in red"); } checknotchecked = false; notjustcheckbox = false; donotsubmit = false; } else { $(formSelector).attr({action : ''+this.Action+''}); $(formSelector).attr({method : ''+this.Method+''}); $(formSelector).submit(); } return true; }; }; </code></pre> <p>You can implement it like this:</p> <pre><code>$(document).ready(function(){ var myForm = new Validator("#formId"); myForm.Required = new Array("input.lightborder"); myForm.Email = new Array("#email"); $("#form-submit-button-id").click(function(){ myForm.validate(); }); }); </code></pre> <p>You can add CSS Selectors for required fields. The one for Email must be unique.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload