如果字段为空，我需要在点击时显示HTML表单并显示错误消息，否则我尝试使用JavaScript执行此操作
<script type="text/javascript">
$(document).ready(function () {
$('#idnext').click(function () {
$("#fromtopupvalues").validate({
messages: {
usernfidtxt:{required: "Please enter your nf id",},
first_name: {required:"Please enter a first name",},
last_name: {required:"Please enter a last name",},
email: {required:"Please enter a valid email address",},
phone: {required:"Please enter a valid phone number",},
address: {required:"Please enter a valid address",},
city: {required:"Please enter your City",},
country: {required:"Please enter your Country",},
amount: {required:"Please enter your amount",},
},
rules: {
usernfidtxt: "required",
first_name: "required",
last_name: "required",
email: {// compound rule
required: true,
email: true,
},
phone:{
required: true,
pattern: "^[0-9-+s()]*$",
},
address: "required",
city: "required",
country: "required",
amount: "required",
},
});
})
});
</script>
在HTML表单中，我有以下代码
<div class="container">
<div class="stepwizard col-md-offset-3">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
<a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a>
<p>Payment form</p>
</div>
<div class="stepwizard-step">
<a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
<p>Summary</p>
</div>
</div>
</div>
<form role="form" id="fromtopupvalues" action="" method="post">
<div class="row setup-content" id="step-1">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h4> Payment form</h4>
<div class="form-group">
<label class="control-label col-sm-4" for="useridtxt">TOPUP User NFC ID <span style="color: red" >*</span> :</label>
<input type="number" class="form-control" id="usernfidtxt" placeholder="TOPUP User NFC ID" name="usernfcidtxt" min="0" required >
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="first_name">First Name <span style="color: red" >*</span> :</label>
<input class="form-control" id="first_name" placeholder="First Name" name="first_name" required>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="last_name">Last Name <span style="color: red" >*</span> :</label>
<input class="form-control" id="last_name" placeholder="Last Name" name="last_name" required>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="email">Email <span style="color: red" >*</span> :</label>
<input type="email" class="form-control" id="email" placeholder="Email" name="email" required>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="phone">Phone number <span style="color: red" >*</span> :</label>
<input type="tel" class="form-control" id="phone" placeholder="Phone number" pattern="^[0-9-+s()]*$" name="phone" required>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="address">Address <span style="color: red" >*</span> :</label>
<textarea class="form-control" id="address" placeholder="Address" name="address" required></textarea>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="city">City <span style="color: red" >*</span> :</label>
<input class="form-control" id="city" placeholder="City" name="city" required>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="country">Country <span style="color: red" >*</span> :</label>
<input class="form-control" id="country" placeholder="Country" name="country" value="Sri Lanka" required>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="idamounttxt">Amount (Rs.)<span style="color: red" >*</span> :</label>
<input type="number" class="form-control" id="amount" placeholder="Amount" name="amount" min="0">
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" id="idnext" type="button" onclick="showInput();" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h4> Summary</h4>
<div class="row">
<div class="well col-lg-12 ">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<address>
<strong><span id='Rc_addressheader'>Elf Cafe</span></strong>
<br><span id='Rc_addressline1'>2135 Sunset Blvd,Los Angeles, CA 90026</span><br>
<span id='Rc_addresscuntry'>Sri Lanka</span><br>
<abbr title="Phone">P:</abbr><span id='Rc_addressPhone'>(213) 484-6829</span><br>
<abbr title="Email">E:</abbr><span id='Rc_addressemail'>test@gmail.com</span>
</address>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 text-right">
<p>
<em>Date:<span id='Rc_date'>1st November, 2013</span></em>
</p>
</div>
</div>
<div class="row">
<div class="text-center">
<h1>Summary</h1>
</div>
</span>
<table class="table table-hover">
<thead>
<tr>
<th><h4>Payment </h4></th>
<th class="text-center"><h4>Price (Rs.)</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-9"><em><strong>TOPUP value</strong></em></h4></td>
<td class="col-md-1 text-center"><span id='Rc_price'><strong>26</strong></span></td>
</tr>
<tr>
<td class="col-md-9"><em><strong>SubPayment</strong></em></h4></td>
<td class="col-md-1 text-center"><span id='Rc_SubPayment'>50</span></td>
</tr>
<!-- <tr>
<td class="text-right">
<p>
<strong>Subtotal: </strong>
</p>
<p>
<strong>Tax: </strong>
</p></td>
<td class="text-center">
<p>
<strong><span id='Rc_subtotal'>26</span></strong>
</p>
<p>
<strong>50</strong>
</p></td>
</tr>-->
<tr>
<td class="text-right"><h4><strong>Total: </strong></h4></td>
<td class="text-center text-danger"><h4><strong>Rs.<span id='Rc_Total'>31.53</span>/=</strong></h4></td>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-success btn-lg btn-block">
Pay Now <span class="glyphicon glyphicon-chevron-right"></span>
</button></td>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
我需要的是当用户点击我需要使用JavaScript或jQuery验证付款表单的下一个表单时
答案 0 :(得分：1)
嗨，请检查以下小提琴。更新了您的代码，现在看起来很有效。只需调用$（＆＃34; #registerform＆＃34;）。valid（）;在按钮内单击。同时将验证声明移到click函数之外。
$(document).ready(function() {
$("#registerform").validate({
messages: {
usernfidtxt: {
required: "Please enter your nf id"
},
first_name: {
required: "Please enter a first name"
},
last_name: {
required: "Please enter a last name"
},
email: {
required: "Please enter a valid email address"
},
phone: {
required: "Please enter a valid phone number"
},
address: {
required: "Please enter a valid address"
},
city: {
required: "Please enter your City"
},
country: {
required: "Please enter your Country"
},
amount: {
required: "Please enter your amount"
}
},
rules: {
usernfidtxt: "required",
first_name: "required",
last_name: "required",
email: { // compound rule
required: true,
email: true,
},
phone: {
required: true,
pattern: "^[0-9-+s()]*$",
},
address: "required",
city: "required",
country: "required",
amount: "required",
},
});
$('#idnext').click(function() {
$("#registerform").valid();
});
});