jQuery停止从变更事件提交推出

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');
    }
});