如何获取jQuery inputValidation插件的验证结果（非form场景）

问题 #

我用的是jQuery inputValidation插件，现在即时验证功能正常，但点击提交按钮时，想通过$("#validate").inputValidation()获取验证结果，确保所有输入都符合要求。页面没用到<form>标签，只用了带id="validate"的<div>，代码如下：

<div class="tab-content" id="validate">                    
<div class="tab-pane fade show active" id="popular" role="tabpanel" aria-labelledby="popular-tab">                      
<div class="col-md-12">
<div class="field-regm form-inner mb-30">
<label>name</label>
<input type="text" name="name" id="name" class="validate" data-validate-type="minlength" data-constraint="3"  autofocus  minlength="3" maxlength="100" placeholder="name here">

</div>

</div>

<div class="col-md-12">
<div class="field-regm form-inner mb-30">
<label>mobile</label>
<input type="tel" maxlength="10" name="mobile" id="mobile" class="validate" data-validate-type="phoneUS"  pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="02XXXXXXXX">

</div>
</div>

<div class="col-md-12">
<div class="form-inner">
<button class="primary-btn2" type="submit">add</button>
</div>
</div>

</div>

<script>
    
$("#validate").inputValidation();
        
</script>

解决方案 #

这个插件支持通过inputValidation('validate')方法手动触发全量验证，直接返回验证结果，具体实现如下：

给提交按钮绑定点击事件，在回调里调用手动验证方法，根据结果处理后续逻辑：

<!-- HTML结构保持不变，仅修改script部分 -->
<script>
// 初始化插件
$("#validate").inputValidation();

// 绑定提交按钮点击事件
$('.primary-btn2').on('click', function() {
    // 手动触发所有输入项的验证
    const isValid = $('#validate').inputValidation('validate');
    
    if (isValid) {
        // 验证通过，执行提交逻辑（比如AJAX提交数据）
        console.log('所有输入验证通过');
        // 这里写你的提交代码
    } else {
        // 验证不通过，插件会自动显示错误提示，也可以添加自定义提示逻辑
        console.log('存在未通过验证的输入');
    }
});
</script>

补充说明 #

• $('#validate').inputValidation('validate')会遍历所有带validate类的输入框，执行验证后返回布尔值：true表示全部通过，false表示有未通过项
• 调用该方法时，插件会自动触发和即时验证一致的错误提示，无需额外编写提示逻辑
• 验证通过后，可在if (isValid)分支中编写数据提交的具体代码（如AJAX请求）

内容的提问来源于stack exchange，提问作者rcweb