Welcome to WebmasterWorld Guest from 54.159.165.175

Forum Moderators: open

Validate optional form fields with default values

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

5+ Year Member Top Contributors Of The Month



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)

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



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)

5+ Year Member Top Contributors Of The Month



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)

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



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)

5+ Year Member Top Contributors Of The Month



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)

WebmasterWorld Senior Member 5+ Year Member



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)

5+ Year Member Top Contributors Of The Month



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)

WebmasterWorld Senior Member 5+ Year Member



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)

5+ Year Member Top Contributors Of The Month



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)

WebmasterWorld Senior Member 5+ Year Member



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.
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month