StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h2>Edit 1</h2> <p>With your updated code, my suggestion would be to call the same validation logic when the user attempts to submit the form. You need to indicate to the user when there's a problem, i.e., highlight the input with a red background, or display an error popup, etc.</p> <p>Currently your code to validate email, for example, only runs when the user clicks out of an email input box they were typing in:</p> <pre><code>$(document).on('blur', 'input.email', function() { var $this = $(this); var input_groups = $this.parent(); $.each(input_groups , function(i){ var inpg = input_groups[i]; email_values = $.map($(inpg).children('input'), function(e,i){ return $(e).val(); }).join(''); validate_Email(email_values, input_groups.parent().parent().parent()); }); }); </code></pre> <p>First, I would refactor this logic into a separate method that can be shared and re-used between the live validation that happens during form entry, and the validation you're going to add during form submit:</p> <pre><code>function validate_Email_Input(el) { var $this = $(el); var input_groups = $this.parent(); var isValid = true; $.each(input_groups , function(i){ var inpg = input_groups[i]; email_values = $.map($(inpg).children('input'), function(e,i){ return $(e).val(); }).join(''); isValid = isValid && validate_Email(email_values, input_groups.parent().parent().parent()); }); return isValid; } </code></pre> <p>Then your live email validation would be converted to this:</p> <pre><code>$(document).on('blur', 'input.email', function() { validate_Email_Input(this); }); </code></pre> <p>And you could run this same validation logic inside your <code>submit</code> function like this:</p> <pre><code>var isValid = true; $('input.email').each(function(i, el) { isValid = isValid && validate_Email_Input(el); }); </code></pre> <p>Here I'm running through the same validation of all the email inputs, and setting the value of field <code>isValid</code> based on whether all of them are valid email entry. You could apply this same format to all your other <code>on('blur'...)</code> or <code>on('keyup'...)</code> validation functions, by running the same validation logic during the form submission. Then use the same idea I presented below to only submit the form if all the validations pass.</p> <p>Demo with email validation: <a href="http://jsfiddle.net/BQdQc/2/" rel="nofollow">http://jsfiddle.net/BQdQc/2/</a></p> <p>This should get you started. Note that your logic may not be this simple, if the entire form doesn't have to be filled out. For instance, if it's not required to fill out every email address, you may have to adjust the code to only validate email if the first/last name are also filled in. You will have to think through this logic based on your requirements. Hope this helps!</p> <hr> <p>Inside your <code>submit</code> function, you need to check your validation logic and cancel the submission if there are validation errors. Also, you'll want to provide some sort of user feedback that they need to resolve a problem in the form:</p> <pre><code>jQuery('#submit').click(function() { if (validate_Email(blah) && validate_Pass(blah) && validate_Cell(blah2) && validate_Cell(blah3) ...) { // proceed with jQuery.ajax post } else { // display error message to user } } </code></pre> <p>You can also formulate it this way to avoid building a giant <code>if</code> statement:</p> <pre><code>isValid = true; isValid = isValid && validate_Email(blah); isValid = isValid && validate_Cell(blah2); if (!some_complicated_function(blah3)) isValid = false; isValid = isValid && validate_Pass(blah3); // etc. if (isValid) { // proceed with jQuery.ajax post } else { // display error message to user } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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