麻烦使用Validate.js验证表单

时间:2015-01-07 15:05:23

标签: javascript forms validation

我无法使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>

2 个答案:

答案 0 :(得分:0)

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

    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

答案 1 :(得分:0)

我对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);