javascript - 根据某些规则阻止 Jquery 中的提交按钮

Question

我正在尝试根据评论表单输入执行一些 jQuery 验证，它部分工作并且还显示一些有线行为。因此，你们中的任何人都可以提供帮助，这将非常有帮助。

这是我编写的代码:

$('body.single-post #submit').attr('disabled', 'disabled');

$('form#commentform').keyup(function() {
    /*Checking if name is provided*/
    if ( $.trim( $('form#commentform input#author').val() )  == '' ) {
        $('p.comment-form-author').append('<span id="nameNotice">Please enter your name</span>');
    } else {
        $('#nameNotice').remove();
    }
    /*Checking if email is provided*/
    if ( $.trim( $('form#commentform input#email').val() )  == '' ) {
        $('p.comment-form-email').append('<span id="emailNotice">Please enter a valid email</span>');
    } else if ( isEmail( $.trim( $('form#commentform input#email').val() ) ) == false ) {
        $('p.comment-form-email').append('<span id="emailNotice">This is not a valid email</span>');
    } else {
        $('#emailNotice').remove();
    }
    /*Checking if comment is provided*/
    if ( $.trim( $('form#commentform textarea#comment').val() ).length  < 10 ) {
        $('p.comment-form-comment').append('<span id="commentNotice">Comment must be at least 10 charecters</span>');
    } else {
        $('#commentNotice').remove();
    }
    if ( ( $.trim( $('form#commentform input#author').val() )  != '' ) &&
         ( $.trim( $('form#commentform input#email').val() ) != '' ) &&
         ( $.trim( $('form#commentform textarea#comment').val() ).length  > 10 ) 
        ){

        $('body.single-post #submit').removeAttr('disabled');
    } else {
        $('body.single-post #submit').attr('disabled', 'disabled');
    }
});

我在使用此脚本时遇到的问题是 -

1. 当我输入姓名然后通过电子邮件和他们评论(在文本中)时，该按钮没有被启用，但它是自己的，但它应该是。但是当我第一次输入评论(在文本区域中)然后输入姓名/电子邮件时 - 然后按钮将被启用。非常有线。不知道为什么。
2. 此外，该脚本仅在通过键盘退格键删除文本时才起作用，如果我通过鼠标选择删除它，然后退格整个文本，则该按钮保持启用状态。只有当我通过退格键删除每个文本时，它才会被禁用。

我还想显示一些消息，例如如果该字段为空，则会显示“请输入您的姓名”，当它填满时，它将再次消失。如果他再次退格该条目，则会再次显示该消息。所以我尝试了这样的事情:

if ( ( $.trim( $('form#commentform input#author').val() )  != '' ) ) {
        $('p#something').append("<span>Please enter name</span>");
    }

但在这种情况下，每次字段变空时，它都会一遍又一遍地添加它。

大家有什么想法吗？

Answer 1

假设您有以下 HTML。我已经让它为你运行了。 Fiddle

$('#submit').attr('disabled', 'disabled');

$('form#commentform').keyup(function() {

    if ( ( $.trim( $('#author').val() )  != '' ) &&
         ( $.trim( $('input#email').val() ) != '' ) &&
         ( $('#comment').val().length  > 3 ) 
        ){

        $('#submit').removeAttr('disabled');
    } else {
        $('#submit').attr('disabled', 'disabled');
    }
    
    
});

<form id="commentform">
    <input type="text" required id="author"></br>
    <input type="email" required id="email"></br>
       <textarea required id="comment"></textarea></br>
        <input type="submit" id="submit" value="submit" >
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

最后，对于验证部分，我只是使用了 HTML5 属性。他们会处理的。如果您仍然需要自定义验证，那么您必须编写正则表达式模式。