Question

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

这是我写的代码：

   map.drawOverlay({
                lat: destinations[i].Latitude,
                lng: destinations[i].Longitude,
                content: '<div class="overlay" id="' + destinations[i].Id + '">' + destinations[i].Name + '<div class="overlay_arrow below"></div></div>'
            });

我对此脚本的问题是 -

当我输入姓名时，请发送电子邮件至＆amp;他们评论（在textaread中）按钮没有被启用它自己，但它应该是。但是当我第一次输入评论（在textarea中）然后输入名称/电子邮件时 - 然后按钮就会启用。很有线。不知道为什么。
此外，脚本仅在键盘退格键删除文本时才起作用，如果我通过鼠标选择删除它然后退回整个按钮，则按钮保持启用状态。如果我通过退格删除每个文本，它只会被禁用。

我还想显示一些消息，如果该字段为空，那么它将显示“请输入您的姓名”，当它填满时它将再次消失。如果他退回该条目，它将再次显示该消息。所以我试过这样的事情：

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

但在这种情况下，每次字段变空时，它都会不断添加它。

任何想法的人？

Answer 1

假设您使用以下HTML。我让它为你奔跑。 Fiddle

＆＃13;

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

＆＃13;

<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>

＆＃13;

最后，对于验证部分，我只使用了HTML5属性。他们会照顾它。如果您仍需要自定义验证，那么您就可以编写正则表达式模式。

在Jquery中阻止提交按钮以获取某些规则

1 个答案: