jquery - 表单中的实时验证是提交和取消按钮

Question

我有两个按钮：

<input id="apply" type="submit" class="smgreen" name="apply" value="Apply">
<input id="cancel" type="submit" class="smred" name="cancel" value="Cancel">

我需要实时验证表单并单击应用按钮，但是当我单击取消按钮时不需要。我该怎么做？

我的 JS：

f = {};
$('.required').each(function() {
  var id = $(this).prop('id');
  f[id] = new LiveValidation(id, { validMessage: "ok", wait: 500 } );
  f[id].add( Validate.Presence, { failureMessage: "error" } );
});

Answer 1

您可以在提交按钮中添加处理程序事件，如下所示：

$('#apply').click(function(){
 f = {};
 $('.required').each(function() {
   var id = $(this).prop('id');
   f[id] = new LiveValidation(id, { validMessage: "ok", wait: 500 } );
   f[id].add( Validate.Presence, { failureMessage: "error" } );
 });
});

Answer 2

我建议不要将“取消”设置为“提交”按钮。想想看……如果你想取消，你并没有真正提交任何东西。

此外，如果您坚持有多个提交按钮，请给它们一个更通用的名称：

<input id="apply"  type="submit" name="action" value="Apply" />
<input id="cancel" type="submit" name="action" value="Cancel" />

就您的 JavaScript 而言，不要在单击按钮时验证，而是在表单提交时验证：

$('#myForm').on('submit', function(e) {
    e.preventDefault();

    // do validation stuff
    if( valid ) {
        $(this).submit();
    } else {
        // do something about your errors
    }
});