Question

我有使用Javascript进行验证的表单。所有的下降都没有验证。有什么帮助吗？

<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

你的问题是你的id使用方括号[]，它在jquery中是一个attribute-equals-selector。见http://api.jquery.com/attribute-equals-selector/

我建议不要在id字符串中使用方括号。虽然html5允许，但我会坚持使用标准的单词和数字字符[a-zA-Z_0-9]来避免javascript工具和库的问题

如果您仍想使用方括号，则必须将它们转义。请参阅jQuery selector for inputs with square brackets in the name attribute。

Answer 2

如果您使用的是<input type='submit'>，则无论如何都会提交表单。尝试使用<input type='button'>它可能会起作用。

表单验证不适用于选择下拉框

2 个答案: