使用 Validate.js 验证表单时出现问题

Question

我无法使 validate.js 正常工作我已按照 github 上的文档进行操作，并且该表单未在控制台日志或其他方面显示任何错误。我如何将错误传达给用户？

脚本

<script>
    var validator = new FormValidator('form1', [{
    name: 'address',
    rules: 'required'
}, {
    name: 'bedrooms',
    rules: 'required'
}, {
    name: 'bathrooms',
    rules: 'required'
}, {
    name: 'squareFootage',
    rules: 'required'

}], function(errors, event) {
    if (errors.length > 0) {
        // Show the errors
    }
});

表格

<form id="" name="form1" method="POST"
      action="page2.php" class="">
    <div class=" row input-append addressWrapper" id="fieldWrapper ">
        <input id="searchTextField" type="text" name="address"
               class="form1 request-input values address search-query"
               placeholder="Enter Your Address">
        <input type="hidden" name="type" id="changetype-all" checked="checked">
        <input type="hidden" name="city_image" id="city_image" value="">
        <input type="hidden" name="lat" id="lat">
        <input type="hidden" name="lng" id="lng">
        <input type="hidden" name="submit" id="submit" class="">
    </div>
    <div class="row stats">
        <div class="col-md-12">

            <select name="bedrooms" class="form3">
                <option selected value="">Bedrooms</option>
                <option value="0">0</option>

                <option value="1">1</option>

            </select></div>

        <div class="col-md-12">

            <select name="bathrooms" class="form3">
                <option selected value="">Bathrooms</option>
                <option value="1">1</option>


            </select>
        </div>
        <div class="col-md-12 marl ">

            <select name="squareFootage" class="form3">
                <option selected value="">Square Footage</option>
                <option value="0-800">0-800</option>

            </select>
        </div>

        <button type="submit" name="next" class="btn form1 btn-success worth p1" id="next"
                value="What's It Worth?">Submit
        </button>
    </div>
    </div>
</form>

结束正文标签上方

  <script src="js/validate.js"></script>

Answer 1

您的回调需要手动构建错误消息。

    function(errors, event) {
        // Show the errors
        if (errors.length > 0) {
          var tmpMsg = "";              
          for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
              tmpMsg += '* ' + errors[i].message + '\n';
          }
          alert(tmpMsg);
        }
    });

这是工作测试页面： http://jsfiddle.net/b10wrbdk/

gl.

Answer 2

我对validate.js一无所知，只是看了说明书

您没有对这些错误采取任何措施，所以什么也没有发生。这是您的代码：

 function(errors, event) {
    if (errors.length > 0) {
        // Show the errors
    }
 }

在手册中，他们举例说明了如何操作。这是：

function(errors, event) {
    if (errors.length > 0) {
        var errorString = '';

        for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
            errorString += errors[i].message + '<br />';
        }

        el.innerHTML = errorString;
    }
}

只需将 el.innerHTML = errorString; 中的 el 替换为您自己的变量，或者如果您想测试它，只需输入 alert(errorString);。

使用 Validate.js 验证表单时出现问题

Trouble Validating form with Validate.js

javascript

forms

validation