验证jquery的功能不起作用

时间：2017-03-06 11:05:50

标签： javascript jquery html5

我编写了SignupForm函数来验证，但这是一个错误，函数未定义。请检查代码片段。我正在使用jquery验证函数。您的帮助将不胜感激。谢谢。

＆＃13;
＆＃13; 
$(function() {
  var $signupForm = $('#SignupForm');

  $signupForm.validate({
    errorElement: 'em'
  });

  $signupForm.formToWizard({
    submitButton: 'SaveAccount',
    nextBtnClass: 'btn btn-primary next',
    prevBtnClass: 'btn btn-default prev',
    buttonTag: 'button',
    validateBeforeNext: function(form, step) {
      var stepIsValid = true;
      var validator = form.validate();
      $(':input', step).each(function(index) {
        var xy = validator.element(this);
        stepIsValid = stepIsValid && (typeof xy == 'undefined' || xy);
      });
      return stepIsValid;
    },
    progress: function(i, count) {
      $('#progress-complete').width('' + (i / count * 100) + '%');
    }
  });
});
＆＃13; 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<script src="https://raw.githubusercontent.com/artoodetoo/formToWizard/master/jquery.formtowizard.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>

<form id="SignupForm" action="">
  <fieldset>
    <legend>Account information</legend>
    <div class="form-group">
      <label for="Name">Name</label>
      <input id="Name" type="text" class="form-control" required />
    </div>
    <div class="form-group">
      <label for="Email">Email</label>
      <input id="Email" type="email" class="form-control" required />
    </div>
    <div class="form-group">
      <label for="Password">Password</label>
      <input id="Password" type="password" class="form-control" />
    </div>
  </fieldset>

  <fieldset>
    <legend>Company information</legend>
    <div class="form-group">
      <label for="CompanyName">Company Name</label>
      <input id="CompanyName" type="text" class="form-control" required />
    </div>
    <div class="form-group">
      <label for="Website">Website</label>
      <input id="Website" type="text" class="form-control" />
    </div>
    <div class="form-group">
      <label for="CompanyEmail">CompanyEmail</label>
      <input id="CompanyEmail" type="text" class="form-control" />
    </div>
  </fieldset>

  <fieldset class="form-horizontal" role="form">
    <legend>Billing information</legend>
    <div class="form-group">
      <label for="NameOnCard" class="col-sm-2 control-label">Name on Card</label>
      <div class="col-sm-10"><input id="NameOnCard" type="text" class="form-control" /></div>
    </div>
    <div class="form-group">
      <label for="CardNumber" class="col-sm-2 control-label">Card Number</label>
      <div class="col-sm-10"><input id="CardNumber" type="text" class="form-control" /></div>
    </div>
    <div class="form-group">
      <label for="CreditcardMonth" class="col-sm-2 control-label">Expiration</label>
      <div class="col-sm-10">
        <div class="row">
          <div class="col-xs-3">
            <select id="CreditcardMonth" class="form-control col-sm-2">
                      <option value="1">1</option>
                     
                      
                      <option value="12">12</option>
                    </select>
          </div>
          <div class="col-xs-3">
            <select id="CreditcardYear" class="form-control">
                      <option value="2009">2009</option>
                      <option value="2017">2017</option>
                      <option value="2018">2018</option>
                      <option value="2019">2019</option>
                    </select>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label for="Address1" class="col-sm-2 control-label">Address 1</label>
      <div class="col-sm-10"><input id="Address1" type="text" class="form-control" /></div>
    </div>
    <div class="form-group">
      <label for="Address2" class="col-sm-2 control-label">Address 2</label>
      <div class="col-sm-10"><input id="Address2" type="text" class="form-control" /></div>
    </div>
    <div class="form-group">
      <label for="Zip" class="col-sm-2 control-label">ZIP</label>
      <div class="col-sm-4"><input id="Zip" type="text" class="form-control" /></div>
      <label for="Country" class="col-sm-2 control-label">Country</label>
      <div class="col-sm-4"><select id="Country" class="form-control">
    			    <option value="CA">Canada</option>
                    <option value="US">United States of America</option>
                    <option value="GB">United Kingdom (Great Britain)</option>
                    <option value="AU">Australia</option>
                  
                    <option value="YE">Yemen</option>
                    <option value="ZR">Zaire</option>
                    <option value="ZM">Zambia</option>
                    <option value="ZW">Zimbabwe</option>
                </select>
      </div>
  </fieldset>
  <p>
    <button id="SaveAccount" class="btn btn-primary submit">Submit form</button>
  </p>
</form>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：-1)

似乎你没有在你的代码中添加jQuery库。 http://code.jquery.com/jquery-3.1.1.min.js

＆＃13;
＆＃13; 
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>

<script>
    $( function() {
        var $signupForm = $( '#SignupForm' );
        $signupForm.validate({errorElement: 'em'});
       });
</script> 

 <form id="SignupForm" action="">
        <fieldset>
            <legend>Account information</legend>
            <div class="form-group">
            <label for="Name">Name</label>
            <input id="Name" type="text" class="form-control" required />
            </div>
            <div class="form-group">
            <label for="Email">Email</label>
            <input id="Email" type="email" class="form-control" required />
            </div>
            <div class="form-group">
            <label for="Password">Password</label>
            <input id="Password" type="password" class="form-control" />
            </div>
        </fieldset>

        <fieldset>
            <legend>Company information</legend>
            <div class="form-group">
            <label for="CompanyName">Company Name</label>
            <input id="CompanyName" type="text" class="form-control" required />
            </div>
            <div class="form-group">
            <label for="Website">Website</label>
            <input id="Website" type="text" class="form-control" />
            </div>
            <div class="form-group">
            <label for="CompanyEmail">CompanyEmail</label>
            <input id="CompanyEmail" type="text" class="form-control" />
            </div>
        </fieldset>

        <fieldset class="form-horizontal" role="form">
            <legend>Billing information</legend>
            <div class="form-group">
            <label for="NameOnCard" class="col-sm-2 control-label">Name on Card</label>
            <div class="col-sm-10"><input id="NameOnCard" type="text" class="form-control" /></div>
            </div>
            <div class="form-group">
            <label for="CardNumber" class="col-sm-2 control-label">Card Number</label>
            <div class="col-sm-10"><input id="CardNumber" type="text" class="form-control" /></div>
            </div>
            <div class="form-group">
            <label for="CreditcardMonth" class="col-sm-2 control-label">Expiration</label>
            <div class="col-sm-10"><div class="row">
                <div class="col-xs-3">
                <select id="CreditcardMonth" class="form-control col-sm-2">
                  <option value="1">1</option>
                 
                  
                  <option value="12">12</option>
                </select>
                </div>
                <div class="col-xs-3">
                <select id="CreditcardYear" class="form-control">
                  <option value="2009">2009</option>
                  <option value="2017">2017</option>
                  <option value="2018">2018</option>
                  <option value="2019">2019</option>
                </select>        
                </div>
            </div></div>
            </div>
            <div class="form-group">
            <label for="Address1" class="col-sm-2 control-label">Address 1</label>
            <div class="col-sm-10"><input id="Address1" type="text" class="form-control" /></div>
            </div>
            <div class="form-group">
            <label for="Address2" class="col-sm-2 control-label">Address 2</label>
            <div class="col-sm-10"><input id="Address2" type="text" class="form-control" /></div>
            </div>
            <div class="form-group">
            <label for="Zip" class="col-sm-2 control-label">ZIP</label>
            <div class="col-sm-4"><input id="Zip" type="text" class="form-control" /></div>
            <label for="Country" class="col-sm-2 control-label">Country</label>
            <div class="col-sm-4"><select id="Country" class="form-control">
			    <option value="CA">Canada</option>
                <option value="US">United States of America</option>
                <option value="GB">United Kingdom (Great Britain)</option>
                <option value="AU">Australia</option>
              
                <option value="YE">Yemen</option>
                <option value="ZR">Zaire</option>
                <option value="ZM">Zambia</option>
                <option value="ZW">Zimbabwe</option>
            </select>
            </div>
        </fieldset>
        <p>
            <button id="SaveAccount" class="btn btn-primary submit">Submit form</button>
        </p>
    </form>
＆＃13;
＆＃13;
＆＃13;

MG

相关问题
最新问题