Welcome to WebmasterWorld Guest from 50.16.52.237

Forum Moderators: open

Message Too Old, No Replies

Validate optional form fields with default values

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

Junior Member

5+ Year Member Top Contributors Of The Month

joined:Mar 1, 2010
posts: 194
votes: 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?
5:43 pm on Oct 22, 2012 (gmt 0)

Administrator

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Aug 10, 2004
posts:10595
votes: 22


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?
5:47 pm on Oct 22, 2012 (gmt 0)

Junior Member

5+ Year Member Top Contributors Of The Month

joined:Mar 1, 2010
posts: 194
votes: 0


I get validation error messages right next to the fields:

Email >> Please enter a valid email address.
URL >> Please enter a valid URL.
1:34 am on Oct 23, 2012 (gmt 0)

Administrator

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Aug 10, 2004
posts:10595
votes: 22


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.
1:39 am on Oct 23, 2012 (gmt 0)

Junior Member

5+ Year Member Top Contributors Of The Month

joined:Mar 1, 2010
posts: 194
votes: 0


The error messages are provided by the validation plug-in. Here's a test:
[dl.dropbox.com ]
4:35 am on Oct 23, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 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');
7:26 am on Oct 23, 2012 (gmt 0)

Junior Member

5+ Year Member Top Contributors Of The Month

joined:Mar 1, 2010
posts: 194
votes: 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?
11:52 am on Oct 23, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 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.
1:47 pm on Oct 23, 2012 (gmt 0)

Junior Member

5+ Year Member Top Contributors Of The Month

joined:Mar 1, 2010
posts: 194
votes: 0


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


I don't understand it. Would you mind explaining more?
12:02 am on Oct 24, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 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.