我想请求帮助修复此代码以进行移动验证。 我已经解决了有关验证的问题，但我现在的问题是它不会提交我的表单。当我试图在提交div上删除type =“button”时，无论是否有错误消息，它都会发送表单。也许没有删除type =“按钮”还有其他方法。
这是我的jquery代码。
<script>
function showError(sel, msg) {
var selector = sel;
$(selector).text(msg).show();
}
function hideError(sel, msg) {
var selector = sel;
$(selector).text("").hide();
}
$(document).ready(function() {
$('#lbform button').click(function() {
var errormsg = 0;
var gender = $("select[name=gender2]").val();
var sel = ".error-msg-gender";
if (gender) {
hideError(sel, msg);
errormsg = 0;
} else {
var msg = "This field is required";
showError(sel, msg);
errormsg = 1;
}
var val = $("input[name=firstname]").val();
var sel = ".error-msg-fname";
if (val && val.length > 1) {
var pattern = /^[a-zA-Z\s]*$/;
if (pattern.test(val)) {
hideError(sel, msg);
errormsg = 0;
} else {
var msg = "Should only contains letters and spaces.";
showError(sel, msg);
errormsg = 1;
}
} else {
var msg = "Should have at least 2 characters.";
showError(sel, msg);
errormsg = 1;
}
var year = $(".year").val();
var month = $(".month").val();
var day = $(".day").val();
var sel = ".error-msg-dob";
if (year && month && day) {
hideError(sel, msg);
errormsg = 0;
} else {
var msg = "All fields must not be empty.";
showError(sel, msg);
errormsg = 1;
}
var email = $("input[name=email]").val();
var sel = ".error-msg-email";
if (email) {
var pattern = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (pattern.test(email)) {
hideError(sel, msg);
errormsg = 0;
} else {
var msg = "Not a valid email address.";
showError(sel, msg);
errormsg = 1;
}
} else {
var msg = "Email field must not be empty.";
showError(sel, msg);
errormsg = 1;
}
var password = $("input[name=password]").val();
var sel = ".error-msg-pass";
if (password) {
if (password.length > 3) {
hideError(sel, msg);
errormsg = 0;
} else {
var msg = "Should have at least 4 characters.";
showError(sel, msg);
errormsg = 1;
}
} else {
var msg = "Password field must not be empty.";
showError(sel, msg);
errormsg = 1;
}
if(errormsg == 0) { $("#lbform").trigger("submit"); }
else {}
});
});
</script>
这是我的html：
<form id="lbform" class="formlayout" action="http://www.ediwow.com/signup.cfm" method="post">
<fieldset>
<div class="magic">
<input type="hidden" value="1" name="sexuality">
</div>
<div class="row cf">
<select name="gender2" id="dating-gender2" class="required gender gender2">
<option value="1" selected="selected">Man looking for a woman</option>
<option value="2">Woman looking for a man</option>
</select>
<div class="error-msg-gender"></div>
</div>
<div class="row cf">
<input type="text" class="text blur" placeholder="First name:" name="firstname">
<div class="error-msg-fname"></div>
</div>
<div class="row cf">
<select class="day" name="dobday">
<option value="">Day</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select class="month" name="dobmonth">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select class="year" name="dobyear">
<option value="">Year</option>
<?php for($x=date("Y") - 18; $x >= 1918; $x--): ?>
<option value="<?php echo $x; ?>">
<?php echo $x; ?>
</option>
<?php endfor; ?>
</select>
<div class="error-msg-dob"></div>
</div>
<!-- The <p> tags below can be swapped from an image. -->
<div class="continue-btn">
<a onclick="showHide('example');return false;" class="showLink" id="example-show" href="#">
Continue
</a>
</div>
<!-- Anything that sits in the div class=more will be hidden until the Continue link is clicked -->
<div class="more" id="example">
<div class="row cf">
<input type="text" class="text blur" placeholder="Email:" name="email" id="email">
<div class="error-msg-email"></div>
</div>
<div class="row cf">
<input type="password" value="" name="password" placeholder="Password:" id="password">
<div class="error-msg-pass"></div>
</div>
<div class="row cf">
<button class="header" type="button">JOIN FREE</button>
</div>
<div class="row cf">
<span class="note">By clicking 'Join Free' you are agreeing to our <br><a title="Terms of use" href="http://www.ediwow.com/terms" class="orange-color" target="blank">Terms of Use</a></span>
</div>
</div>
</fieldset>
</form>
感谢您的帮助
答案 0 :(得分：0)
像这样改变你的形式
<form id="lbform" class="formlayout" action="http://www.ediwow.com/signup.cfm" method="post" onsubmit= "return validate()">
// form elements
<div class="row cf">
<input type="submit" class="header" value="JOIN FREE">
</div>
</form>
然后创建像这样的验证函数
<script>
function validate()
{
var status=true;
var gender = $("select[name=gender2]").val();
if( /*check ur validation condition here for ex:*/ gender="" )
{
status=false;//add this line whenever the validation return false
//Display message if needed
}
//Rest of the validation like the above
//status remain true only if all the validation conditions satisfied.else it becomes false
return status;//return the current value in status after all val conditions are considered.
}
</script>