StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>submitHandler won't fire until the form is submitted for the first time. If you want to check username uniqueness while the user is filling out the form for the first time, you'd need a separate function. The example below assumes you have a page that runs a SQL query to see if the provided username exists in the database, then returns a json string like <code>"{taken:false}"</code> if the username is unique</p> <pre><code>$('#yourForm [name="username"]').on('blur',function(){ var username = $(this).val(); $.get('check/username.php',{username:username},function(data) { if(data.taken) { // highlight the field and indicate that the username is already taken } },'json'); } </code></pre> <p>The specifics of the call to <code>$.get</code> would depend on how your backend is set up. But in general, the process would go:</p> <ul> <li>user enters a username</li> <li>user blurs out of field</li> <li>$.get or $.ajax call is made to the server to check uniqueness of username</li> <li>if the response from the server indicates that the username is not unique, handle your validation (higlight the field, add an <strong>X</strong> icon, etc) and either <ul> <li>prevent form submission until the username IS unique, or</li> <li>let the form submit and return an error for duplicate username</li> </ul></li> </ul> <p><strong>UPDATE</strong></p> <p>If you want to create a new rule for the validation plugin, you can do something like:</p> <pre><code>function isUsernameUnique(username,field) { var unique = false; $.ajax({ url: 'path/to/usernameCheck/', data: { username: username }, async: false, success: function(data) { unique = data.unique; } }); return unique; } $.validator.addMethod( 'uniqueUsername', isUsernameUnique, 'That username is already in use. Please choose a unique username.' ); </code></pre> <p>Then, in your form's validate function:</p> <pre><code>$('#yourForm').validate({ ... rules: { username: { uniqueUsername: true } ... } ... }); </code></pre> <p>And, a separate <code>blur</code> function for your username field:</p> <pre><code>$('[name="username"]').on('blur',function(){ var unique = isUsernameUnique($(this).val(),$(this)); if(!unique) { // handle error } }); </code></pre> <p>This lets you reuse the same function for both your pre-submit validation and your validation plugin. However, I see two issues here:</p> <p>1 - After your first submit, $.fn.validate() will eagerly validate your username field, meaning the <code>blur</code> event on the username field is no longer required. perhaps you can disable it after the first submit to prevent unnecessary ajax calls</p> <p>2 - It's not 100% DRY, as you'll need to do your own error handling in the <code>blur</code> event handler</p>

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