Question

我通过使用Jquery（不是附加项）创建验证表单。

问题：1.我未填写任何字段，然后单击Submit（提交）按钮，未触发所有验证并且提交了表单。我认为按钮上没有触发验证的功能。

请帮帮我。谢谢！

中的代码示例

JS。

$(function () { 
    /* $('#form').submit(function () { */
        $('#firstname').on('input', function() {
        var firstName = $('#firstname').val();
        if (!firstName) {
            $('#firstname').siblings(".error").addClass('alert-on');
            return false;
        }
        else {return true;}
      });
      $('#lasttname').on('input', function() { 
         var lasttName = $('#lastname').val();
         if (!lastName) {
            $('#lasttname').siblings(".error").addClass('alert-on');
            return false;
        }
        else {return true;} 
      });

        $('#phone').on('input', function() {
            var number = $(this).val().replace(/[^\d]/g, '')
            if (number.length == 7) {
            number = number.replace(/(\d{3})(\d{4})/, "$1-$2");
            } else if (number.length == 10) {
            number = number.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
            }
            $(this).val(number)
        });
        $('#email').on('input', function() {
            var input=$(this);
            var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
            var is_email=re.test(input.val());
            if(is_email){input.removeClass("alert-on")}
            else{input.addClass("alert-on");}
        });

    });
    $("input").on("change keyup paste", function(){
      $(this).siblings('.error').removeClass('alert-on');
/* }) */
 })

HTML

<form id="form">
            <div class="">
                <input type="text" placeholder="First name*" id="firstname">
                <div class="error">Required</div>
            </div>
            <div class="">
                <input type="text" placeholder="Last name*" id="lastname">
                <div class="error">Required</div>
            </div>
            <div class="">
                <input type="email" id="email" name="email" placeholder="email">
                <div class="error">A valid email address is required</div>  
            </div>
            <div class="">
                <input type="text" placeholder="Phone*" maxlength="12" id="phone">
                <div class="error">Required</div>
            </div>

            <div id="form_submit">
                <button type="submit">
                    Submit
                </button>
            </div>
        </form>

CSS

input {
  display: list-item;
  margin-bottom: 10px;
}
.error {
  display: none;
  color: red;
}
.alert-on {
  display: block;
}

Answer 1

尝试

<!doctype html> <html lang="en">

<head>
    <style>
        input {
            display: list-item;
            margin-bottom: 10px;
        }

        .error {
            display: none;
            color: red;
        }

        .alert-on {
            display: block;
        }
    </style> </head>

<body>
    <form id="form" onsubmit="onSubmit(event)">
        <div class="">
            <input type="text" placeholder="First name*" id="firstname" onblur="onChangeFirstName()">
            <div class="error">Required</div>
        </div>
        <div class="">
            <input type="text" placeholder="Last name*" id="lastname" onblur="onChangeLastName()">
            <div class="error">Required</div>
        </div>
        <div class="">
            <input type="email" id="email" name="email" placeholder="email" onblur="onChangeEmail()">
            <div class="error">A valid email address is required</div>
        </div>
        <div class="">
            <input type="text" placeholder="Phone*" maxlength="12" id="phone" onblur="onChangePhone()">
            <div class="error">Required</div>
        </div>

        <div id="form_submit">
            <button type="submit">
                Submit
            </button>
        </div>
    </form>


    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script>
        function onChangeFirstName() {
            var firstName = $('#firstname').val();
            if (firstName.trim() == "") {
                $('#firstname').siblings(".error").addClass('alert-on');
                return false;
            } else {
                return true;
            }
        }

        function onChangeLastName() {
            var lastName = $('#lastname').val();
            if (lastName.trim() == "") {
                $('#lastname').siblings(".error").addClass('alert-on');
                return false;
            } else {
                return true;
            }
        }

        function onChangePhone() {
            var number = $("#phone").val().replace(/[^\d]/g, '')
            if (number.length == 7) {
                number = number.replace(/(\d{3})(\d{4})/, "$1-$2");
            } else if (number.length == 10) {
                number = number.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
            }
            $("#phone").val(number)
        }

        function onChangeEmail() {
            var input = $("#email");
            var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
            var is_email = re.test(input.val());
            if (is_email) {
                $('#email').siblings(".error").removeClass('alert-on');
                return true;
            } else {
                $('#email').siblings(".error").addClass('alert-on');
                return false;
            }
        }

        function onSubmit(e) {
            e.preventDefault();
            if (onChangeFirstName() && onChangeLastName() && onChangeEmail()) {
                $("#form").submit();
            }
        }
    </script> </body>

</html>

Answer 2

您同时呼叫 onchange 和 oninput 。会在更改时将其添加到您的警报标签中，并在 onkeyup 事件同时将其删除。你需要做这样的事情

function validateForm() {
    val = true;
    var firstName = $('#firstname').val();
    if (!firstName) {
        $('#firstname').siblings(".error").addClass('alert-on');
        val = false;
    }
    var lastName = $('#lastname').val();
    if (!lastName) {
        $('#lastname').siblings(".error").addClass('alert-on');
        val = false;
    }

    var input = $('#email');
    var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
    var is_email = re.test(input.val());
    if (!is_email) {
        $('#email').siblings(".error").addClass('alert-on');
        val = false;
    }

    return val;
}
$(function () {
    $("input").on("change keyup paste", function () {
        if (!$(this).val()) { $(this).siblings('.error').addClass('alert-on'); }
        else { $(this).siblings('.error').removeClass('alert-on'); }
    });
    $("#form").submit(function (event) {
        if (validateForm()) {
            return;
        };
        event.preventDefault();
    });
})

input {
  display: list-item;
  margin-bottom: 10px;
}
.error {
  display: none;
  color: red;
}
.alert-on {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" action="action.php" method="post">
            <div class="">
                <input type="text" placeholder="First name*" id="firstname">
                <div class="error">Required</div>
            </div>
            <div class="">
                <input type="text" placeholder="Last name*" id="lastname">
                <div class="error">Required</div>
            </div>
            <div class="">
                <input type="email" id="email" name="email" placeholder="email">
		            <div class="error">A valid email address is required</div>	
            </div>
           
        
            <div id="form_submit">
                <button type="submit">
                    Submit
                </button>
            </div>
    </form>

表单验证：单击提交而不触发验证

2 个答案: