Having trouble with form input required="required"

JavaScript
1

I have been working on a form for a project, and cannot get the “required” to work correctly as I am using a ‘default value’.
I have implemented a jquery script that has an onFocus and blur function, and if the form button is pressed the ‘default value’
is being passed on as the submitted entry.

Any help with a snippet that can fix this would be greatly appreciated.

Here’s an example of my scripts:

<form action=“form_action” method=“get”>
Zip Code:
<input type=“text” name=“SearchZipCode” required=“required” value=“Enter Zip Code here” />
<br />
<input type=“submit” value=“Submit” />
</form>

…

<script type=“text/javascript”>
jQuery(document).ready(function($) {
$(‘input[type=“text”]’).addClass(“idleField”);
$(‘input[type=“text”]’).focus(function() {
$(this).removeClass(“idleField”).addClass(“focusField”);
if (this.value == this.defaultValue){
this.value = ‘’;
}
if(this.value != this.defaultValue){
this.select();
}
});
});
</script>

note: when value=“” there is no error

Again, I am looking for any help with this script (html or javascript) so that the default value does not get
passed through as a submitted entry without the user entering a value.

Thanks!

2

The required attribute only works in HTML5 supported browsers so if you plan on supporting IE8 and below it won’t work, see the below jsFiddle for an easy jQuery solution to get around having the default value been sent.

3

Quick response! Thanks. Looks like it’ll work. I’m gonna go test it on my server now.

Thanks, again!

4

Thanks, SgtLegend! Had to make some modifications, but that script totally did the trick!

5

No problem, glad it worked for you.