homepage Welcome to WebmasterWorld Guest from 54.234.126.92
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library : Charter : Moderators: whoisgregg

JavaScript and AJAX Forum

    
Validate optional form fields with default values
Rain_Lover




msg:4510911		 5:27 pm on Oct 22, 2012 (gmt 0)

Sample form:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#cname, #cemail, #curl, #ccomment").focus(function(){
if( this.value == this.defaultValue ) {
$(this).val("");
}
}).blur(function() {
if( !this.value.length ) {
$(this).val(this.defaultValue);
}
});
$.validator.addMethod("noName", function(value, element) {
return value != element.defaultValue;
}, "Please enter your name.");
$.validator.addMethod("noComment", function(value, element) {
return value != element.defaultValue;
}, "Please enter your comment.");
$("#commentForm").validate();
});
</script>
</head>
<body>
<form id="commentForm" action="">
<p>
<input id="cname" name="name" size="25" class="required noName" value="Name">
</p>
<p>
<input id="cemail" name="email" size="25" class="email" value="Email">
</p>
<p>
<input id="curl" name="url" size="25" class="url" value="URL">
</p>
<p>
<textarea id="ccomment" name="comment" rows="5" cols="35" class="required noComment">Comment</textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</form>
</body>
</html>

If you click the submit button, you get error messages on Email and URL fields while they are optional. How can I prevent it?

 

phranque




msg:4510920		 5:43 pm on Oct 22, 2012 (gmt 0)

do you get those error message from the on-page javascript form input validation or is that a response from server-side form input checking?
Rain_Lover




msg:4510923		 5:47 pm on Oct 22, 2012 (gmt 0)

I get validation error messages right next to the fields:

Email >> Please enter a valid email address.
URL >> Please enter a valid URL.
phranque




msg:4511063		 1:34 am on Oct 23, 2012 (gmt 0)

install the Live HTTP Headers add-on for Firefox and use this to determine if the GET or POST request is sent to the server when you click the form Submit button.
Rain_Lover




msg:4511065		 1:39 am on Oct 23, 2012 (gmt 0)

The error messages are provided by the validation plug-in. Here's a test:
[dl.dropbox.com ]
daveVk




msg:4511103		 4:35 am on Oct 23, 2012 (gmt 0)

Change validate call

$("#commentForm").validate({ignore: ".ignore"});

on focus after
$(this).val("");
add
$(this).removeClass('ignore');


and after
$(this).val(this.defaultValue);
add
$(this).addClass('ignore');
Rain_Lover




msg:4511155		 7:26 am on Oct 23, 2012 (gmt 0)

Perfect! Thank you so much! :)

Or even completely getting rid of the class attribute and then:

on focus: this.className = 'url'
on blur: this.className = ''

without changing the validate call.
Test: [dl.dropbox.com ]

Any improvement to suggest?
daveVk




msg:4511266		 11:52 am on Oct 23, 2012 (gmt 0)

Fiddling the className needs a bit to extra logic.
#curl => 'url'
#cemail => ...
etc
and confuses matters if classes mentioned in css.

In either case the 'value != element.defaultValue' test is now redundent in addMethod calls.
Rain_Lover




msg:4511285		 1:47 pm on Oct 23, 2012 (gmt 0)

the 'value != element.defaultValue' test is now redundent in addMethod calls


I don't understand it. Would you mind explaining more?
daveVk




msg:4511481		 12:02 am on Oct 24, 2012 (gmt 0)

I see now that 'name' and 'comment' are mandatory, and this fix is not suitable for mandatory cases, so code is not redundant.

In cases where fix applied, validator should not see case where value==default.

Bottom line: Don't fiddle class on mandatory cases.
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved