Question

我有一个小表格。我想验证更改事件和提交事件的输入。在这种情况下，为了有效性，我检查输入的数字是否大于允许的最小数量。如果输入低于最小值，则应将输入更改为最小值。（或者，如果这是不好的UI让我知道）

但是，我发现如果有人在输入中输入文本然后单击提交，或按下输入更改事件将首先触发。因此，输入会在更改事件上自动更改，然后当它到达提交事件时，表单将通过其验证并提交。

相反，我想要以某种方式停止提交，因此用户必须至少在重新提交之前确认最小数量是可接受的（可能显示错误）。这可能吗？

<form data-minimum="10" >
   <input type="number" value="10"/>
   <button type="submit">Submit</button>
</form>

$('input').change(function(){
   if( parseFloat( $(this).val() ) < parseFloat( $('form').data('minimum') ) ){
     $(this).val( $('form').data('minimum') );
     alert('whoa... error');
     // somehow stop submit!
   }
});

$('form').submit(function(){
   if( parseFloat( $('input').val() ) < parseFloat( $('form').data('minimum') ) ){
       return false;
   }
});

我创造了一个小提琴： http://jsfiddle.net/Fu6VR/1/

如果输入5并按Enter键，则会因为更改事件中的更正而提交。

Answer 1

在表单提交事件this中引用表单，因此您必须使用$('input')。使用.val()代替.value()

$('input').change(function () { if (parseFloat($(this).val()) < parseFloat($('form').data('minimum'))) { $(this).val($('form').data('minimum')); alert('whoa... error'); } }); $('form').submit(function (event) { if (parseFloat($('input').val()) < parseFloat($(this).data('minimum'))) { event.preventdefault(); //I prefer //return false; } });

修改

您可以使用.data()和自定义属性来存储有效/无效的详细信息

$('input').change(function () {
    if (parseFloat($(this).val()) < parseFloat($('form').data('minimum'))) {
        $(this).val($('form').data('minimum'));
        $(this).data('invalid', 'invalid'); 
        console.log('error');
        // somehow stop submit!
    }else{
        $(this).data('invalid','');
    }
});

$('form').submit(function () {
    var $input = $('input');
    console.log($input.data('invalid'));
    if ($input.data('invalid') == 'invalid' || parseFloat($input.val()) < parseFloat($('form').data('minimum'))) {
        console.log('not submited');
        return false;
    } else {
        console.log('submitted');
    }
});

jquery停止从更改事件提交传播

1 个答案:

修改