按鈕禁用驗證不適用於jQuery中的鍵盤

Question

嗨，我有一個表格，我想為此驗證字段，我正在使用jquery現在第一個字段name驗證工作正常，它禁用了按鈕，直到電話字段為空。 之后，第二個字段中的數字條件很好，但問題是它沒有檢查第一個字段是否為空。 表示條件變為真而不檢查第一個字段是否為空。 希望我能理解你所有的問題

jQuery代碼

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

Answer 1

我已經使用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}
                            });

                    }


                });

});