JQuery Validation 在保存按钮单击处理程序中不起作用

Question

我已经尝试了几个小时来进行验证，但无济于事。我在 input 元素中包含了 name 属性。脚本源也包括在内。验证方法也已​​被解雇。内容未经验证。谁能看到我的代码有什么问题？提前致谢。 圣诞快乐！

我的 HTML 代码

<input type="text" id="sessionSynopsisNameInput" name="sessionSynopsisNameInput" 
  class="form-control input-group-lg" maxlength="70" placeholder="Session Name" value=""/>
<div class="errMsg"></div>

我的 Javascript 代码

setupFormValidationRules();
function setupFormValidationRules() {
    jQuery.validator.addMethod('lettersonly', function (value, element) {
        return this.optional(element) || /^[a-zA-Z ]*$/.test(value);
    });

    $('#dataForm').validate({
        rules: {
            sessionSynopsisNameInput: {
                required: true,
                lettersonly: true
            }
        },
        messages: {
            sessionSynopsisNameInput: {
                required: 'Please enter Session Synopsis Name',
                lettersonly: 'Only spaces and alphabets are allowed'
            }
        }
    });
}

在保存按钮单击处理程序中调用 validate 方法。

$('#saveButton').on('click', function () {
    $('#dataForm').validate();
});

这些是我包含的脚本源

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation/dist/additional-methods.js"></script>

Answer 1

lettersonly 已经存在于其他方法我必须更改名称 lettersonly1 并且它工作正常，您可以查看示例 p>

setupFormValidationRules();

function setupFormValidationRules() {      
    $.validator.addMethod('lettersonly1', function (value, element) {
        return this.optional(element) || /^[^-\s][a-zA-Z\s-]+$/.test(value);
    });

    $('#dataForm').validate({
        rules: {
            sessionSynopsisNameInput: {
                required: true,
                lettersonly1: true
            }
        },
        messages: {
            sessionSynopsisNameInput: {
                required: 'Please enter Session Synopsis Name',
                lettersonly1: 'Only spaces and alphabets are allowed'
            }
        }
    });
}

$(function(){
    $('#dataForm').validate()
})

$("#dataForm").on("submit", function(){
    if($(this).valid()){
        console.log('submit');
        $(this).submit();
    }
    
    return false;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.js"></script>
<form method='post' action='#' id = 'dataForm'>
    <input type="text" id="sessionSynopsisNameInput" name="sessionSynopsisNameInput" 
      class="form-control input-group-lg" maxlength="70" placeholder="Session Name" value=""/>
    <div class="errMsg"></div>
    <button id='saveButton' name='saveButton' type='submit'>Save</button>
</form>