Form validation not working on select drop down box

Question

I have form with validations using Javascript. All of the drop downs are not validating. Any help?

<form id="itsp-form" method="post" action="http://www.url.com/save_itsp.php">
<label class="custom">Company name</label>
<input id="company_name" type="text" name="company_name" />

<label class="custom">Company URL</label>
<input id="company_url" type="text" name="company_url" />

<label class="custom">Company address</label>
<input id="company_address" type="text" name="company_address" />

<label class="custom">Type of business</label>
<select id="type_of_business[]" name="type_of_business[]" multiple="multiple">
  <option value="" selected="selected"></option>
  <option value="enterprise">Business sector/Enterprise</option>
  <option value="residential">Residential</option>
  <option value="wholesale">Wholesale VoIP Carrier</option>
  <option value="other">Other</option>
</select>

<label class="custom">Areas served</label>
<select id="areas_served[]" name="areas_served[]" multiple="multiple">
  <option value="" selected="selected"></option>
  <option value="USA">USA</option>
  <option value="Canada">Canada</option>
  <option value="other">Other</option>
</select>

<br />

<label class="custom">Sales contact</label><br />
<h4>Name</h4>
  <input id="sales_name" type="text" name="sales_name" />
<h4>Phone</h4>
  <input type="text" name="sales_phone" />
<h4>Email</h4>
  <input type="text" name="sales_email" />

<br />

<label class="custom">Testing contact</label><br />
<h4>Name</h4>
  <input id="testing_name" type="text" name="testing_name" />
<h4>Phone</h4>
  <input type="text" name="testing_phone" />
<h4>Email</h4>
  <input type="text" name="testing_email" />

<br />

<label class="custom">Switch Platform</label>
<select id="switch_platform[]" name="switch_platform[]" multiple="multiple">
  <option value="" selected="selected"></option>
  <option value="asterisk">Asterisk</option>
  <option value="broadsoft">Broadsoft</option>
  <option value="metaswitch">Metaswitch</option>
  <option value="sipx">SipX/eZuce</option>
  <option value="other">Other</option>
</select>

<label class="custom">Interested In Testing</label>
<select id="interested_in_testing[]" name="interested_in_testing[]" multiple="multiple">
  <option value="" selected="selected"></option>
  <option value="atas">ATAs</option>
  <option value="ip_phones">IP Phones</option>
  <option value="gateways">Gateways</option>
  <option value="ip_pbx">IP PBX</option>
</select>

<input type="submit" id="submit" value="Submit" />

<script>
$('#submit').click(function() {
    $('.error').hide();

    var hasError = false;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    if (($("#company_name").val() == '') || ($("#type_of_business[]").val() == '')) {
       $("#errors").after('<span class="error">Please enter your Company name.</span>');
       hasError = true;
    }
    if (($("#company_url").val() == '') || ($("#company_address").val() == '')) {
       $("#errors").after('<span class="error">Please enter your Company information.</span>');
       hasError = true;
    }
    if ($("#areas_served[]").val() == '') {
       $("#errors").after('<span class="error">Please enter your Areas served.</span>');
       hasError = true;
    }
    if ($("#type_of_business[]").val() == '') {
       $("#errors").after('<span class="error">Please enter your Type of business.</span>');
       hasError = true;
    }
    if ($("#sales_name").val() == '') {
       $("#errors").after('<span class="error">Please enter your Sales contact information.</span>');
       hasError = true;
    }
    if ($("#testing_name").val() == '') {
       $("#errors").after('<span class="error">Please enter your Tester contact information</span>');
       hasError = true;
    }
    if ($("#switch_platform[]").val() == '') {
       $("#errors").after('<span class="error">Please enter your Switch platform</span>');
       hasError = true;
    }
    if ($("#interested_in_testing[]").val() == '') {
       $("#errors").after('<span class="error">Please enter your Testing interests.</span>');
       hasError = true;
    }
  if(hasError == true) { return false; }
});

Answer 1

Your problem is that your ids are using square brackets [] which in jquery is an attribute-equals-selector. See http://api.jquery.com/attribute-equals-selector/

I would recommend not using square brackets in your id strings. Although permissible by html5, I would stick to using standard word and digit characters [a-zA-Z_0-9] to avoid issues with javascript tools and libraries

If you still want to use square brackets you must escape them. See jQuery selector for inputs with square brackets in the name attribute.

Answer 2

If you are using <input type='submit'>, the form will be submitted no matter what. Try using <input type='button'> it may work then.