How to make the first option of a select input give an empty value so that it is seen by validation as an empty 'required' field?

Question

I have created a form which includes required fields validated by Jquery validate.js.

Im looking for the simplest way to give an empty value to the first select option so that when a user does not select an option from the required field the validation can not submit the form due to a required field being left blank.

below is an example of how the form is coded. Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><head>

<meta name="google-site-verification" content="WJzOl7qm8SHqmzMTjrdQwqVgXRu-EUMnY3qYUdrcJhI" />
<meta name="keywords" content=" " />
<meta name=" " content=" " />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Example Form</title>



<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
 $('#contactForm').submit(function() {
 return $('#contactForm').valid();
 });
  $("#contactForm").validate({
         debug: false,
   rules: {
    firstName: "required",

    email: {
     required: true,
     email: true
    }
   },
   messages: {
    firstName: "Enter name.",
    email: "Enter email address.",
   },

  });
 });

</script>

</head>

<body>
        <div id="wrapper"> 


<form class="contactForm" action="next.php" method="post" name="contactForm" id="contactForm">

      <h1>Contact Form</h1>


<label for="subject">Subject: </label>

<select name="subject" id="subject" class="required">

<option>- Please Select -</option>

<option>General</option>
<option>Products</option>
<option>Service</option>
<option>Complaint</option>
</select>
<br>
<br>

<label for="firstName">First Name:</label>

<br>

<input name="firstName" type="text" value="" id="firstName" class="required"/>

<br><br>

<label for="surname">Surname:</label>

<br>

<input name="surname" type="text" value="" id="surname" class="required"/>

<br><br>


<label for="email">Email:</label>

<br>

<input name="email" type="text" value="" id="email" class="required email" />

<br><br>

<label for="comments">Comments:</label>

<br>

<textarea name="comments" class="required" cols="40" rows="10" id="requirements"></textarea>
<br><br>



<input type="submit" value="Submit" />
</p>
</form>




        </div>
</div>

John Kugelman John Kugelman · Accepted Answer · 2013-02-26T03:26:37

2

votes

<option value="">- Please Select -</option>

How to make the first option of a select input give an empty value so that it is seen by validation as an empty 'required' field?

1 Answers