禁用按钮，直到清除所有字段

Question

我正在处理一个简单的联系表单，除了要求所有字段（例如电子邮件格式，联系电话的号码和姓名的字母）外，我还添加了自定义验证。验证工作正常，但是我的问题是，如果未清除所有字段，如何禁用按钮。

我现在要做的是禁用默认情况下的按钮，并且清除一个字段后，即使其他字段为空，也会启用该按钮。

如果从验证中清除了所有字段，则必须启用该按钮。

希望你能帮助我。

谢谢。

// form validation
jQuery(function ($) {
    $('form .form-control').keyup(function () {
    let formBtn = true;
        $(this).each(function () {

            if ($(this).val().length === 0) {
                $(this).closest('.form-group').find('span').addClass('text-warning').text('this is a required field');
                formBtn = true;
            } else {
            formBtn = false;
                $(this).closest('.form-group').find('span').removeClass().text('');
                // CHECK IF EMAIL FORMAT IS VALID
                if ($(this).attr('name') == 'email') {
                    if (!validateEmail($(this).val())) {
                        $(this).closest('.form-group').find('span').addClass('text-warning').text('invalid email format');
                    }
                }

                if ($(this).attr('name') == 'name') {
                    if (!validateName($(this).val())) {
                        $(this).closest('.form-group').find('span').addClass('text-warning').text('Only letters, spacing, hypen(-) and period are allowed.');
                    }
                }

                if ($(this).attr('name') == 'contactNumber') {
                    if (!validateContactNumber($(this).val())) {
                        $(this).closest('.form-group').find('span').addClass('text-warning').text('Only Numbers are allowed.');
                    } else if (validateContactNumber($(this).val()) == "invalidLength") {
                        $(this).closest('.form-group').find('span').addClass('text-warning').text('9-15 numbers are allowed.');
                    }
                }
            }
    $(this).closest('form').find('button').prop('disabled',formBtn);
        });
    });


    // VALIDATE NAME
    function validateName(name) {
        var regex = /^[a-zA-Z-.\s]*$/;
        if (regex.test(name)) {
            return true;
        } else {
            return false;
        }
    }

    // VALIDATE EMAIL
    function validateEmail(email) {
        var regex = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
        if (regex.test(email)) {
            return true;
        } else {
            return false;
        }
    }

    // VALIDATE PHONE NUMBER
    function validateContactNumber(number) {
        var numValid = /^[0-9]+$/;
        var lenValid = /^.{9,15}$/;
        if (numValid.test(number)) {
            if (lenValid.test(number)) {
                return true;
            }else{
                return 'invalidLength';
            }
        } else {
            return false;
        }
    }
});

label{
    display: inline-block;
    margin-bottom: 6px;
    letter-spacing: .025em;
    color: #2A363B;
}
.form-group span{
    text-transform: uppercase;
    font-size: 11px;
}
.form-control{
    padding: 12px 25px 12px 25px !important;
    line-height: 24px !important;
    border-radius: 0;
    font-weight: 400;
    height: auto;
    border: 1px solid #e0e0e0;
    box-shadow: none;
    transition: .3s ease-in-out;
    background-color: #fcfcfc;
    color: #2A363B;
}
.form-control:focus {
    border-color: rgba(30, 30, 40, .5);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(30, 30, 40, .3);
}
.btn{
    padding: 14px 30px;
    border-radius: 0;
}
.btn-default{
    background-color: #2A363B;
    border: 1px solid #2A363B;
    color: #FFF;
    transition: .3s ease-in-out;
}
.btn-default:focus,
.btn-default:hover{
    background-color: #2A363B;
    border: 1px solid #2A363B;
    color: #FFF;
    opacity: 0.7 !important;
}
.btn[disabled]{
    background-color: #FFF;
    border: 1px solid #ccc;
    color: #222;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
    <div class="col-md-offset-3 col-md-6">
        <form class="form-horizontal" autocomplete="off" method="post">
            <div class="form-group">
                <label for="subject" class="control-label">Subject</label>
                <input type="text" class="form-control" id="subject" name="subject">
                <span></span>
            </div>
            <div class="form-group">
                <label for="name" class="control-label">Name</label>
                <input type="text" class="form-control" id="name" name="name">
                <span></span>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="email" class="control-label">Email</label>
                        <input type="email" class="form-control" id="email" name="email">
                        <span></span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="contactNumber" class="control-label">Contact Number</label>
                        <input type="text" class="form-control" id="contactNumber" name="contactNumber">
                        <span></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="message" class="control-label">Message</label>
                <textarea name="message" id="message" cols="30" rows="10" class="form-control" name="message"></textarea>
                <span></span>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-4 col-sm-4">
                    <button type="submit" class="btn btn-default btn-block" name="contactBtn" disabled >SUBMIT</button>
                </div>
            </div>
        </form>
    </div>
</div>

Answer 1

在验证单个文本框或单个文本区域时，无法验证按钮的价值，您需要验证整个表单，然后必须启用按钮。您启用和禁用按钮的逻辑没有任何意义。

// form validation
jQuery(function ($) {
    $('form .form-control').keyup(function () {
    let formBtn = true;
        $(this).each(function () {

            if ($(this).val().length === 0) {
                $(this).closest('.form-group').find('span').addClass('text-warning').text('this is a required field');
                
            } else {
            
                $(this).closest('.form-group').find('span').removeClass().text('');
                // CHECK IF EMAIL FORMAT IS VALID
                if ($(this).attr('name') == 'email') {
                    if (!validateEmail($(this).val())) {
                        $(this).closest('.form-group').find('span').addClass('text-warning').text('invalid email format');
formBtn = true;

                    }
                    else
                        formBtn = false;
                }

                if ($(this).attr('name') == 'name') {
                    if (!validateName($(this).val())) {
                        $(this).closest('.form-group').find('span').addClass('text-warning').text('Only letters, spacing, hypen(-) and period are allowed.');
                        formBtn = true;
                    }
                    else
                        formBtn = false;
                }

                if ($(this).attr('name') == 'contactNumber') {
                    if (!validateContactNumber($(this).val())) {
                        $(this).closest('.form-group').find('span').addClass('text-warning').text('Only Numbers are allowed.');
                    } else if (validateContactNumber($(this).val()) == "invalidLength") {
                        $(this).closest('.form-group').find('span').addClass('text-warning').text('9-15 numbers are allowed.');
formBtn = true;
                    }
                    else
                    formBtn = false;
                }
            }
$('input[type=text],textarea').each(function () {

            if ($(this).val().length === 0) {
                formBtn = true;
            }
        });
    $(this).closest('form').find('button').prop('disabled',formBtn);
        });
    });


    // VALIDATE NAME
    function validateName(name) {
        var regex = /^[a-zA-Z-.\s]*$/;
        if (regex.test(name)) {
            return true;
        } else {
            return false;
        }
    }

    // VALIDATE EMAIL
    function validateEmail(email) {
        var regex = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
        if (regex.test(email)) {
            return true;
        } else {
            return false;
        }
    }

    // VALIDATE PHONE NUMBER
    function validateContactNumber(number) {
        var numValid = /^[0-9]+$/;
        var lenValid = /^.{9,15}$/;
        if (numValid.test(number)) {
            if (lenValid.test(number)) {
                return true;
            }else{
                return 'invalidLength';
            }
        } else {
            return false;
        }
    }
});

label{
    display: inline-block;
    margin-bottom: 6px;
    letter-spacing: .025em;
    color: #2A363B;
}
.form-group span{
    text-transform: uppercase;
    font-size: 11px;
}
.form-control{
    padding: 12px 25px 12px 25px !important;
    line-height: 24px !important;
    border-radius: 0;
    font-weight: 400;
    height: auto;
    border: 1px solid #e0e0e0;
    box-shadow: none;
    transition: .3s ease-in-out;
    background-color: #fcfcfc;
    color: #2A363B;
}
.form-control:focus {
    border-color: rgba(30, 30, 40, .5);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(30, 30, 40, .3);
}
.btn{
    padding: 14px 30px;
    border-radius: 0;
}
.btn-default{
    background-color: #2A363B;
    border: 1px solid #2A363B;
    color: #FFF;
    transition: .3s ease-in-out;
}
.btn-default:focus,
.btn-default:hover{
    background-color: #2A363B;
    border: 1px solid #2A363B;
    color: #FFF;
    opacity: 0.7 !important;
}
.btn[disabled]{
    background-color: #FFF;
    border: 1px solid #ccc;
    color: #222;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
    <div class="col-md-offset-3 col-md-6">
        <form class="form-horizontal" autocomplete="off" method="post">
            <div class="form-group">
                <label for="subject" class="control-label">Subject</label>
                <input type="text" class="form-control" id="subject" name="subject">
                <span></span>
            </div>
            <div class="form-group">
                <label for="name" class="control-label">Name</label>
                <input type="text" class="form-control" id="name" name="name">
                <span></span>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="email" class="control-label">Email</label>
                        <input type="email" class="form-control" id="email" name="email">
                        <span></span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="contactNumber" class="control-label">Contact Number</label>
                        <input type="text" class="form-control" id="contactNumber" name="contactNumber">
                        <span></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="message" class="control-label">Message</label>
                <textarea name="message" id="message" cols="30" rows="10" class="form-control" name="message"></textarea>
                <span></span>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-4 col-sm-4">
                    <button type="submit" class="btn btn-default btn-block" name="contactBtn" disabled >SUBMIT</button>
                </div>
            </div>
        </form>
    </div>
</div>

Answer 2

尝试

jQuery(function($) {
    $('form .form-control').keyup(function() {
        let formBtn = true;
        $(this).each(function() {

            if ($(this).val().length === 0) {
                $(this).closest('.form-group').find('span').addClass('text-warning').text('this is a required field');
                formBtn = true;
            } else {
                //  formBtn = false;
                $(this).closest('.form-group').find('span').removeClass().text('');
                // CHECK IF EMAIL FORMAT IS VALID
                if ($(this).attr('name') == 'email') {
                    if (!validateEmail($(this).val())) {
                        $(this).closest('.form-group').find('span').addClass('text-warning').text('invalid email format');
                    }
                }

                if ($(this).attr('name') == 'name') {
                    if (!validateName($(this).val())) {
                        $(this).closest('.form-group').find('span').addClass('text-warning').text('Only letters, spacing, hypen(-) and period are allowed.');
                    }
                }

                if ($(this).attr('name') == 'contactNumber') {
                    if (!validateContactNumber($(this).val())) {
                        $(this).closest('.form-group').find('span').addClass('text-warning').text('Only Numbers are allowed.');
                    } else if (validateContactNumber($(this).val()) == "invalidLength") {
                        $(this).closest('.form-group').find('span').addClass('text-warning').text('9-15 numbers are allowed.');
                    }
                }

                var len = $('input[type=text],textarea').filter(function() {
                    return $(this).val().length == 0
                }).length;

                var warlen = $('.text-warning').filter(function() {
                    return $(this).text().length > 0
                }).length;

                if (len == 0 && warlen == 0) {
                    formBtn = false;
                }

            }
            $(this).closest('form').find('button').prop('disabled', formBtn);
        });
    });


    // VALIDATE NAME
    function validateName(name) {
        var regex = /^[a-zA-Z-.\s]*$/;
        if (regex.test(name)) {
            return true;
        } else {
            return false;
        }
    }

    // VALIDATE EMAIL
    function validateEmail(email) {
        var regex = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
        if (regex.test(email)) {
            return true;
        } else {
            return false;
        }
    }

    // VALIDATE PHONE NUMBER
    function validateContactNumber(number) {
        var numValid = /^[0-9]+$/;
        var lenValid = /^.{9,15}$/;
        if (numValid.test(number)) {
            if (lenValid.test(number)) {
                return true;
            } else {
                return 'invalidLength';
            }
        } else {
            return false;
        }
    }
});

DEMO HERE

Answer 3

您可以简单地添加必需的属性。这是最简单的解决方法。

// form validation
jQuery(function ($) {
    $('form .form-control').keyup(function () {
    let formBtn = true;
        $(this).each(function () {

            if ($(this).val().length === 0) {
                $(this).closest('.form-group').find('span').addClass('text-warning').text('this is a required field');
                formBtn = true;
            } else {
            formBtn = false;
                $(this).closest('.form-group').find('span').removeClass().text('');
                // CHECK IF EMAIL FORMAT IS VALID
                if ($(this).attr('name') == 'email') {
                    if (!validateEmail($(this).val())) {
                        $(this).closest('.form-group').find('span').addClass('text-warning').text('invalid email format');
                    }
                }

                if ($(this).attr('name') == 'name') {
                    if (!validateName($(this).val())) {
                        $(this).closest('.form-group').find('span').addClass('text-warning').text('Only letters, spacing, hypen(-) and period are allowed.');
                    }
                }

                if ($(this).attr('name') == 'contactNumber') {
                    if (!validateContactNumber($(this).val())) {
                        $(this).closest('.form-group').find('span').addClass('text-warning').text('Only Numbers are allowed.');
                    } else if (validateContactNumber($(this).val()) == "invalidLength") {
                        $(this).closest('.form-group').find('span').addClass('text-warning').text('9-15 numbers are allowed.');
                    }
                }
            }
    $(this).closest('form').find('button').prop('disabled',formBtn);
        });
    });


    // VALIDATE NAME
    function validateName(name) {
        var regex = /^[a-zA-Z-.\s]*$/;
        if (regex.test(name)) {
            return true;
        } else {
            return false;
        }
    }

    // VALIDATE EMAIL
    function validateEmail(email) {
        var regex = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
        if (regex.test(email)) {
            return true;
        } else {
            return false;
        }
    }

    // VALIDATE PHONE NUMBER
    function validateContactNumber(number) {
        var numValid = /^[0-9]+$/;
        var lenValid = /^.{9,15}$/;
        if (numValid.test(number)) {
            if (lenValid.test(number)) {
                return true;
            }else{
                return 'invalidLength';
            }
        } else {
            return false;
        }
    }
});

label{
    display: inline-block;
    margin-bottom: 6px;
    letter-spacing: .025em;
    color: #2A363B;
}
.form-group span{
    text-transform: uppercase;
    font-size: 11px;
}
.form-control{
    padding: 12px 25px 12px 25px !important;
    line-height: 24px !important;
    border-radius: 0;
    font-weight: 400;
    height: auto;
    border: 1px solid #e0e0e0;
    box-shadow: none;
    transition: .3s ease-in-out;
    background-color: #fcfcfc;
    color: #2A363B;
}
.form-control:focus {
    border-color: rgba(30, 30, 40, .5);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(30, 30, 40, .3);
}
.btn{
    padding: 14px 30px;
    border-radius: 0;
}
.btn-default{
    background-color: #2A363B;
    border: 1px solid #2A363B;
    color: #FFF;
    transition: .3s ease-in-out;
}
.btn-default:focus,
.btn-default:hover{
    background-color: #2A363B;
    border: 1px solid #2A363B;
    color: #FFF;
    opacity: 0.7 !important;
}
.btn[disabled]{
    background-color: #FFF;
    border: 1px solid #ccc;
    color: #222;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
    <div class="col-md-offset-3 col-md-6">
        <form class="form-horizontal" autocomplete="off" method="post">
            <div class="form-group">
                <label for="subject" class="control-label">Subject</label>
                <input type="text" class="form-control" id="subject" name="subject" required>
                <span></span>
            </div>
            <div class="form-group">
                <label for="name" class="control-label">Name</label>
                <input type="text" class="form-control" id="name" name="name" required>
                <span></span>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="email" class="control-label">Email</label>
                        <input type="email" class="form-control" id="email" name="email" required>
                        <span></span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="contactNumber" class="control-label">Contact Number</label>
                        <input type="text" class="form-control" id="contactNumber" name="contactNumber" required>
                        <span></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="message" class="control-label">Message</label>
                <textarea name="message" id="message" cols="30" rows="10" class="form-control" name="message" required></textarea>
                <span></span>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-4 col-sm-4">
                    <button type="submit" class="btn btn-default btn-block" name="contactBtn" disabled >SUBMIT</button>
                </div>
            </div>
        </form>
    </div>
</div>