表单只是在未经过验证的情况下提交时会出现什么问题。我前几天通过验证工作正常，但现在它没有验证，只是提交。
这是一个使用hide show方法的多页形式，但由于该函数在form.submit代码中，因此无效。我假设它被强制但是默认但是使用e.preventdefault（）只会导致提交/下一个按钮没有任何动作。
在处理这个问题时常见的小问题是什么，例如jquery url需要在表单之前或脚本表单需要在表单之前，等等可能会意外删除{或;是一个问题？
这是我的表单脚本
<script type="text/javascript">
$('form#mainform').submit(function(e) {
var isValidYear = /^\d{4}$/.test(jQuery('#xxx').val());
var year_number = parseInt(jQuery('#xxxx').val());
var first_name = jQuery.trim(jQuery('#xxx').val());
var last_name = jQuery.trim(jQuery('#xxxx').val());
var form_email = jQuery.trim(jQuery('#xxxxx').val());
var street = jQuery.trim(jQuery('#xxxx').val());
var city = jQuery.trim(jQuery('#xxxx').val());
var state = jQuery.trim(jQuery('#xxxxx').val());
var isValidPhone = /^[2-9]\d{2}[2-9]\d{2}\d{4}$/.test(jQuery('#phone_day').val());
if(current_step == 1){
if(!jQuery('#step-1 input["radio"].required').is(":checked")){
alert('Please select xxxxxx');
}
else {
$('#mainform fieldset').hide();
$('#step-2').show();
current_step++;
}
return false;
}
if(current_step == 2){
if(!isValidYear || (year_number > <?php echo date('Y') ?>)){
alert('Please enter a Year.');
}
else {
$('#mainform fieldset').hide();
$('#step-3').show();
current_step++;
}
return false;
}
if(current_step == 3){
if(first_name.length <= 0 || first_name == 'First Name' || (!first_name.match(/[a-zA-Z]/)) || (first_name.match(/[0-9]/))){
alert('Please enter your First Name.');
}
else if(last_name.length <= 0 || last_name == 'Last Name' || (!last_name.match(/[a-zA-Z]/)) || (last_name.match(/[0-9]/))){
alert('Please enter your Last Name.');
}
else if(street.length <= 0 || street == 'Street Address'){
alert('Please enter your Street Address.');
}
else if(city.length <= 0 || city == 'City'){
alert('Please enter your City.');
}
else if(state.length <= 0 || state == 'State'){
alert('Please enter your State by 2 letter abbreviation.');
}
else if(country.length <= 0 || country == 'Other'){
alert('Please enter your Country.');
}
else if(!isValidPhone){
alert('If your phone number is correct, close this box and then Click the button in the form.');
}
else {
$('form#mainform').submit();
}
return false;
}
});
</script>
这是我的页脚中的验证网址
<script src="/jquery/jquery.validate.js"></script>
这是表格
<form name="mainform" id="mainform" action="/results" method="post">
<h2 id="form_headline"><span>xxxxxx</span></h2>
<p id="form_tagline">xxxxxxxxxxx</p>
<fieldset id="step-1" class="form_step">
<div class="meters prog_1"><p>Form Progress:</p></div>
<label for="xxxxxx">xxxxxx</label>
<ul class="col1 form_cols">
<li><input name="eduLevel" id="eduLevel_4" type="radio" value="4" class="required" />Some High School</li>
</ul>
<ul class="col2 form_cols">
<li><input name="eduLevel" id="eduLevel_18" type="radio" value="18" class="required" /> High School Diploma</li>
</ul>
</fieldset><!-- end #step-1 -->
<fieldset id="step-2" class="form_step">
<div class="meters prog_2"><p>Form Progress:</p></div>
<label for="xxxxxxxx">Select a Year</label>
<select name="xxxxxxx" id="xxxxxx" class="required" >
<option value="">Select Year</option>
<option value="2011" >2011</option>
<option value="2010" >2010</option>
</select>
</fieldset><!-- end #step-2 -->
<fieldset id="step-3" class="form_step">
<div class="meters prog_3"><p>Form Progress:</p></div>
<label for "first_name">First Name</label>
<input type="text" id="first_name" name="first_name" class="required" />
<label for "last_name">Last Name</label>
<input type="text" id="last_name" name="last_name" class="required" />
<label for "street">Street Address</label>
<input type="text" id="street" name="street" class="required" />
<div id="address_line">
<div id="line_city">
<label for "city">City</label>
<input type="text" id="city" name="city" class="required" />
</div><!-- end .address_line -->
<div class="line_state">
<label for "state">State</label>
<select name="state" id="state" class="required" >
<option value="">Select State</option>
<optgroup label="US States">
<option value="AL" >Alabama</option>
<option value="AK" >Alaska</option>
<option value="AZ" >Arizona</option>
<option value="AR" >Arkansas</option>
<option value="CA" >California</option>
<option value="CO" >Colorado</option>
<option value="CT" >Connecticut</option>
<option value="DE" >Delaware</option>
<option value="DC of Columbia" >District of Columbia</option>
<option value="FL" >Florida</option>
<option value="GA" >Georgia</option>
<option value="HI" >Hawaii</option>
<option value="ID" >Idaho</option>
<option value="IL" >Illinois</option>
<option value="IN" >Indiana</option>
<option value="IA" >Iowa</option>
<option value="KS" >Kansas</option>
<option value="KY" >Kentucky</option>
<option value="LA" >Louisiana</option>
<option value="ME" >Maine</option>
<option value="MD" >Maryland</option>
<option value="MA" >Massachusetts</option>
<option value="MI" >Michigan</option>
<option value="MN" >Minnesota</option>
<option value="MS" >Mississippi</option>
<option value="MO" >Missouri</option>
<option value="MT" >Montana</option>
<option value="NE" >Nebraska</option>
<option value="NV" >Nevada</option>
<option value="NH" >New Hampshire</option>
<option value="NJ" >New Jersey</option>
<option value="NM" >New Mexico</option>
<option value="NY" >New York</option>
<option value="NC" >North Carolina</option>
<option value="ND" >North Dakota</option>
<option value="OH" >Ohio</option>
<option value="OK" >Oklahoma</option>
<option value="OR" >Oregon</option>
<option value="PA" >Pennsylvania</option>
<option value="PR" >Peurto Rico</option>
<option value="RI" >Rhode Island</option>
<option value="SC" >South Carolina</option>
<option value="SD" >South Dakota</option>
<option value="TN" >Tennessee</option>
<option value="TX" >Texas</option>
<option value="UT" >Utah</option>
<option value="VT" >Vermont</option>
<option value="VA" >Virginia</option>
<option value="WA" >Washington</option>
<option value="WV" >West Virginia</option>
<option value="WI" >Wisconsin</option>
<option value="WY" >Wyoming</option>
</optgroup>
<option value="" ></option>
<optgroup label="Canada States">
<option value="AB" >Alberta</option>
<option value="BC" >British Columbia</option>
<option value="MB" >Manitoba</option>
<option value="NB" >New Brunswick</option>
<option value="NL" >Newfoundland & Labrador</option>
<option value="NS" >Nova Scotia</option>
<option value="NT" >Northwest Territories</option>
<option value="NU" >Nunavut</option>
<option value="ON" >Ontario</option>
<option value="PE" >Prince Edward Island</option>
<option value="QC" >Quebec</option>
<option value="SK" >Saskatchewan</option>
<option value="YT" >Yukon Territory</option>
</optgroup>
</select>
</div><!-- end .address_line -->
<div class="line_country">
<label for "country">Country</label>
<select name="country" id="country" class="required" >
<option value="US" selected >USA</option>
<option value="CA" >Canada</option>
<option value="Other" >Other</option>
</select>
</div>
</div><!-- end #address_line -->
<label for "phone_day">Daytime Phone Number</label>
<input type="text" id="phone_day" name="phone_day" class="required" />
</fieldset><!-- end #step-5 -->
<!-- passing program variable to schools page -->
<input type="hidden" name="SearchCareerFieldID" value="29" />
<button id="form_submit" class="form_btn" type="submit" value="" ></button>
</form><!-- end #mainform -->
答案 0 :(得分：0)
看看最后几行
<script type="text/javascript">
$('form#mainform').submit(function(e) {
var isValidYear = /^\d{4}$/.test(jQuery('#xxx').val());
var year_number = parseInt(jQuery('#xxxx').val());
var first_name = jQuery.trim(jQuery('#xxx').val());
var last_name = jQuery.trim(jQuery('#xxxx').val());
var form_email = jQuery.trim(jQuery('#xxxxx').val());
var street = jQuery.trim(jQuery('#xxxx').val());
var city = jQuery.trim(jQuery('#xxxx').val());
var state = jQuery.trim(jQuery('#xxxxx').val());
var isValidPhone = /^[2-9]\d{2}[2-9]\d{2}\d{4}$/.test(jQuery('#phone_day').val());
if(current_step == 1){
if(!jQuery('#step-1 input["radio"].required').is(":checked")){
alert('Please select xxxxxx');
}
else {
$('#mainform fieldset').hide();
$('#step-2').show();
current_step++;
}
return false;
}
if(current_step == 2){
if(!isValidYear || (year_number > <?php echo date('Y') ?>)){
alert('Please enter a Year.');
}
else {
$('#mainform fieldset').hide();
$('#step-3').show();
current_step++;
}
return false;
}
if(current_step == 3){
if(first_name.length <= 0 || first_name == 'First Name' || (!first_name.match(/[a-zA-Z]/)) || (first_name.match(/[0-9]/))){
alert('Please enter your First Name.');
}
else if(last_name.length <= 0 || last_name == 'Last Name' || (!last_name.match(/[a-zA-Z]/)) || (last_name.match(/[0-9]/))){
alert('Please enter your Last Name.');
}
else if(street.length <= 0 || street == 'Street Address'){
alert('Please enter your Street Address.');
}
else if(city.length <= 0 || city == 'City'){
alert('Please enter your City.');
}
else if(state.length <= 0 || state == 'State'){
alert('Please enter your State by 2 letter abbreviation.');
}
else if(country.length <= 0 || country == 'Other'){
alert('Please enter your Country.');
}
else if(!isValidPhone){
alert('If your phone number is correct, close this box and then Click the button in the form.');
}
else {
//don't do a submit inside .submit(). It's an infinate loop
return true; //instead, return true
}
}
return false; //return false for everything else
});
</script>