0
我正在爲實現Jquery-Steps插件的表單驗證而苦苦掙扎。JQuery-steps表單驗證插件未驗證
我想在這一點上以最簡單的形式實現表單驗證，而它只是驗證具有「required」屬性的輸入。當我把光標在任何盒子，我在控制檯收到以下錯誤信息：
「遺漏的類型錯誤：無法讀取屬性未定義的‘設置’」
有人可以幫助新手在這裏？我完全迷失了。謝謝。
這裏是我的形式：
<cfform id="form" name="form" method="post" action="actionpages/add_residential_ticket.cfm">
<cfoutput>
<input type="hidden" name="ticket_id" id="ticket_id" value="#ticketnum#" readonly>
</cfoutput>
<h2>
<div id="wizard">
<h2>Your Information</h2>
<section>
<cfinput value="#DateFormat(now(), "mm/dd/yyyy")#" required="yes" type="hidden" name="date" id="date" message="Please enter a date for this service call" tabindex="0" readonly="true"/>
<label for="customer">Your Full Name</label>
<input type="text" required name="customer" id="customer" data-validation="customer"
data-validation-error-msg="You did not enter a valid name" >
<label for="email">Email Address</label>
<input type="email" required name="email" id="email">
<label for="customer_address">Your Full Mailing Address</label>
<textarea required name="customer_address" id="customer_address"></textarea>
<label for="phone">Cell Phone Number</label>
<input required type="tel" name="phone" id="phone">
</section>
<h2>Computer Problem</h2>
<section>
<label for="trouble_reported">Please Provide A Detailed Description Of Your Issue</label><br>
<textarea required name="trouble_reported" id="trouble_reported" rows="15" cols="60"></textarea>
</section>
<h2>Your Equipment</h2>
<section>
<label for="equipment">What Equipment Are You Leaving With Us?</label><br>
<textarea required name="equipment" id="equipment"></textarea>
<br>
<label for="customerPWD">Do You Have A Password?</label>
<input required type="text" autocapitalize="none" name="customerPWD" id="customerPWD">
<br>
</section>
<h2>How Did You Find Us</h2>
<section>
<label for="hdyfu">Please let us know how you found us</label>
<cfselect required queryPosition="below" query="hdyfu" display="method" name="hdyfu" id="hdyfu" tabindex="0" ><option>---Make A Selection---</option></cfselect>
<br>
</section>
</div>
<!--- Mobile Sig Capture CSS --->
<link rel="stylesheet" href="css/signature-pad.css">
</h2>
</cfform>
這裏是我的jQuery的步驟的Javascript：
<!--- JQUERY-Steps --->
<script type="text/javascript" src="js/jquery.steps.js"></script>
<script type="text/javascript" src="js/jquery.steps.min.js"></script>
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/main.css" rel="stylesheet" type="text/css">
<link href="css/jquery.steps.css" rel="stylesheet" type="text/css">
<!--- JQUERY Validator --->
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
<!--- Initialize the JQUERY-Steps plugin --->
<script>
$(function()
{
$("#wizard").steps({
headerTag: "h2",
bodyTag: "section",
saveState: true,
transitionEffect: "slideLeft",
onStepChanging: function(event, currentIndex, newIndex) {
$("#form1").validate().settings.ignore = ":disabled,:hidden";
return $("#form").valid();
},
onFinishing: function(event, currentIndex) {
$("#form1").validate().settings.ignore = ":disabled";
return $("#form").valid();
},
onFinished: function(event, currentIndex) {
alert("Submitted!");
}
}).validate({
errorPlacement: function(error, element) {
element.before(error);
},
rules: {
confirm: {
equalTo: "#password"
}
}
});
});
</script>