Question

我正在努力实现Jquery-Steps插件的表单验证。

我正在尝试以最简单的形式实现表单验证，而它只是验证具有“required”属性的输入。当我将光标放在任何框中时，我在控制台中收到以下错误消息：

“未捕获的TypeError：无法读取未定义的属性'设置'”

有人可以帮助新手吗？我完全迷失了。感谢。

这是我的表格：

    <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-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>

Answer 1

Upwork让我来到这里：D。至于我在你的代码中看到的，你没有在你的代码中的任何地方包含jQuery，而且它是必需的 - 这可能是你的错误。其他的是你正在使用所需的一个属性，它应该在一个类这样的类=＆＃34;必需＆＃34;。

JQuery-steps表单验证插件未验证

1 个答案: