个人中心
gpt4 book ai didi

jquery - 表单验证 : Click Submit not Trigger Validations

转载 作者：太空宇宙 更新时间：2023-11-03 22:13:50 25 4
gpt4 key购买 nike

我使用 Jquery(不是插件)创建验证表单。

问题: 1. 我没有填写任何字段并单击提交按钮，所有验证都没有触发并且提交了表单。我想我在按钮上没有触发验证的功能。

请帮帮我。谢谢!

这是 jsfiddle 中的代码示例

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

最佳答案

试试这个

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

关于jquery - 表单验证 : Click Submit not Trigger Validations，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57829028/

25 4 0
文章推荐： java - 如何修复 "The application may be doing too much work on its main thread"(Android)
文章推荐： c# - 如何创建使用类似于在 C# 中使用的配置文件的扩展方法
文章推荐： c++ - OpenCV:使用 drawContours() 断言失败
文章推荐： c# - ASP.NET 中的 Javascript 警报
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com