I am struggling with implementing the form validation for the Jquery-Steps plugin.
I am trying to implement the form validation in it's simplest form at this point, whereas it just validates inputs that have the "required" attribute. When I put a cursor in any box, i get the following error message in my console:
"Uncaught TypeError: Cannot read property 'settings' of undefined"
Can someone help a newbie here? I'm totally lost. Thanks.
Here is my form:
<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>
Here is my Jquery-steps 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>
