homepage Welcome to WebmasterWorld Guest from 54.167.10.244
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved