按钮禁用验证在 jquery 中的键控上不起作用

Button Disable Validation is not working on keyup in jquery

本文关键字：不起作用 jquery 验证按钮更新时间：2023-09-26

嗨，我有一个表格，我想验证我现在正在使用jquery字段验证name的第一个字段工作正常，它禁用了按钮，直到电话字段为空。之后，在第二个字段中，数字条件很好，但问题是它没有检查第一个字段是否为空。意味着条件变为真而不检查第一个字段是否为空。希望我能够理解你们所有人我的问题是什么

j查询代码

jQuery(document).ready(function($) {
     setTimeout(function(){
                $('#sfp_Modal').modal('show');
            }, 3000);
    /*
    $( ".sfpsubmit, .close" ).click(function() {
        var sfp_cookie = $.cookie('SFPopup', 'sf_popup', { expires: 7 });
        alert(sfp_cookie);          
        if(sfp_cookie == null){
            setTimeout(function(){
                $('#sfp_Modal').modal('show');
            }, 3000);
        }else{          
                $('#sfp_Modal').modal('hide');
        }
    }); */
        $( "#sf-popup .sfname" ).keyup(function() {
          if($(this).val() == '' || $( "#sf-popup .sfphone").val() == '' || $.isNumeric(sfp_phone) == true){
                $('#sfpsubmit').attr('disabled','disabled');
            } else{
                $('#sfpsubmit').removeAttr('disabled');
                $( ".sfp_btn" ).click(function() {
                    $('#sfp_Modal').modal('hide');
                });
            }
        });
        $( "#sf-popup .sfphone" ).keyup(function() {
            var sfp_phone = $(this).val();              
            if(sfp_phone.length > 10){
                $(this).val($(this).val().substr(0,10));
                $('#sfpsubmit').removeAttr('disabled');
            }   
                if(sfp_phone == '' || $( "#sf-popup .sfname").val() == '' || $.isNumeric(sfp_phone) == false ||  sfp_phone.length < 10){
                $('#sfpsubmit').attr('disabled','disabled');
            } else{
                $('#sfpsubmit').removeAttr('disabled');
                $( ".sfp_btn" ).click(function() {
                    $('#sfp_Modal').modal('hide');
                });
            }
            });
        $( "#sf-popup .sfemail" ).keyup(function() {    
                var $email = this.value;
                validateEmail($email);
                function validateEmail(email) {
                    var emailReg = /^(['w-'.]+@(['w-]+'.)+['w-]{2,4})?$/;
                    if (!emailReg.test(email)) {
                        $('#sfpsubmit').attr('disabled','disabled');
                    } else {
                        $('#sfpsubmit').removeAttr('disabled');
                    }
                }   
                }); 
    });

我的表格

echo "<form method='post' action='' name='sfp_popup' id='sf-popup' >";
    echo "<input type='text' name='sf_name' id='sf_name' placeholder='Name' class='col-xs-12 col-md-6 sfname'>";
    echo "<input type='text' name='sf_phone' id='sf_phone' placeholder='98765-43210' class='col-xs-12 col-md-offset-1 col-md-5 sfphone'>";
    echo "<input type='text' name='sf_email' id='sf_email' placeholder='noreply@example.com' class='col-md-12 sfemail'>";
    echo "<textarea name='sf_message' id='sf_message' placeholder='Enter Your Query' class='col-md-12'></textarea>";
    echo "</form>";     
    echo "<button id='sfpsubmit' class='btn btn-primary sfp_btn' name='sfpsubmit' disabled>Submit</button>";

我已经使用 validate 验证了我的表单.js .下面是用于验证的jQuery代码。感谢您的帮助

 jQuery(document).ready(function(){
    jQuery("#sf-popup").validate({
                    rules: {                        
                        sf_name:{
                            required:true,
                            minlength:3,
                            maxlength:30,
                            digits: false
                        },
                        sf_phone:{
                            required:true,
                            maxlength:10,
                            digits: true
                        },
                        sf_email:{
                            required:true,
                            email:true
                        },
                        sf_message:"required"
                    },
                    errorPlacement: function(error, element) {
                        // Append error within linked label
                        jQuery( element )
                            .closest( "#sf-popup" )
                                .find( "label[for='" + element.attr( "id" ) + "']" )
                                    .append( error );
                    },
                    errorElement: "span",
                    messages: {
                        sf_name:{
                            required : "Please enter your Name",
                            minlength : "Minimum Length Should be 3",
                            maxlength : "Max Length Should be 30",
                            digits : "Use Characters only"
                            },
                        sf_phone:{
                            required : "Please enter Phone number",
                            maxlength : "Max length should be 10",
                            digits : "Phone number is not valid"
                            },
                        sf_email:{
                            required : "Please enter email",
                            email : "please enter valid E-mail"
                            },
                        sf_message:"Please enter message"   
                    },
                    submitHandler: function() {
                            var sfp_cookie = jQuery.cookie('SFPopup', 'sf_popup', { expires: 7 });
                            setTimeout(function(){
                                if(jQuery.cookie('SFPopup') == null){
                                    jQuery('#sfp_Modal').modal('show');
                                }else{          
                                jQuery('#sfp_Modal').modal('hide');
                                }
                                }, 3000); 
                            var name = jQuery("#sf_name").val();
                            var phone = jQuery("#sf_phone").val();
                            var email = jQuery("#sf_email").val();
                            var message = jQuery("#sf_message").val();
                            jQuery.ajax({
                                type: 'POST',
                                url: sfpAjax.ajaxurl,
                                data: {action: "sfp_insert","sf_name":name,"sf_phone":phone,"sf_email":email,"sf_message":message}
                            });
                    }

                });
});