问题：

jQuery表单验证仅保存按钮

上官鸿祯

2023-03-14

我正在制作一个表单，其中使用jQuery进行客户端验证，然后在提交后使用PHP进行服务器端验证。我的问题是，通过使用$（“Form”）.Submit（函数(e){}，当我单击Cancel和Delete按钮时，验证消息也会出现，而这是不应该的。我只希望只有当单击Save按钮时才会发生验证。有没有其他方法可以做到这一点？非常感谢。下面是我的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <!--Bootstrap CSS-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
        <title>Contact Form</title>
    </head>
    <body>

        <div class="container">

            <!--Display error message or success message, both won't happen same time-->
            <div id="error"><? echo $message; ?></div>

            <form method="post" id="myform">
                <div class="form-group">
                    <label for="surname">Surname</label>
                    <input type="text" class="form-control" id="surname" name="surname">
                </div>

                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" class="form-control" id="name" name="name">
                </div>

                <div class="form-group">
                    <label for="address">Address</label>
                    <input type="text" class="form-control" id="address" name="address">
                </div>

                <div class="form-group">
                    <label for="email">Email Address</label>
                    <input type="email" class="form-control" id="email" name="email">
                </div>

                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" class="form-check-input" id="male" name="gender" value="Male"> Male
                  </label>
                </div>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" class="form-check-input" id="female" name="gender" value="Female"> Female
                    </label>
                </div>

                <div class="form-group">
                    <label for="telephone">Telephone Number</label>
                    <input type="number" class="form-control" id="telephone" name="telephone">
                </div>
                
                <button type="submit" class="btn btn-primary" id="save" name="save">Save</button>
                <button class="btn btn-warning" id="cancel" name="cancel">Cancel</button>
                <button class="btn btn-success" id="list" name="list">List</button>

            </form>

        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
        
        <script type="text/javascript">
            
            //When Save button is clicked, stop form submitting and run validation using jQuery
            $("form").submit(function (e) {

                var errorMessage = "";
  
                if($("#surname").val() == "") { 
                    errorMessage += "Please input a surname.<br>"  //If field is empty, append to errorMessage string
                }

                if($("#name").val() == "") { 
                    errorMessage += "Please input a name.<br>"
                }
                
                if($("#address").val() == "") { 
                    errorMessage += "Please input an address.<br>"
                }

                if($("#email").val() == "") { 
                    errorMessage += "Please input an email address.<br>"
                }

                if((!($('#male').prop('checked'))) && (!($('#female').prop('checked')))) {
                    errorMessage += " Please input a gender.<br>";
                }

                if($("telephone").val() == "") { 
                    errorMessage += "Please input a telephone number.<br>"
                }

                //If there is an error message
                if(errorMessage != "") {

                    //Set html to display error message 
                    $("#error").html('<div class="alert alert-danger" role="alert"><p>Please fill your form:</p>' + errorMessage + '</div>');
    
                    return false;  //Don't submit the form

                } else {
    
                    //Submit the form if no error
                    return true;
   
                }

            });
         
        </script>
        
    </body>
</html>

共有2个答案

阎修杰

2023-03-14

如果链接链接，请执行

<button type="submit" class="btn btn-primary" id="save" name="save">Save</button>
<a href="#" class="btn btn-warning" id="cancel" name="cancel">Cancel</a>
<a href="#" class="btn btn-success" id="list" name="list">List</a>

如果你喜欢纽扣的话。只需添加type=“button”

<button type="submit" class="btn btn-primary" id="save" name="save">Save</button>
<button type="button" class="btn btn-warning" id="cancel" name="cancel">Cancel</button>
<button type="button" class="btn btn-success" id="list" name="list">List</button>

因为每个按钮的默认值都是Submit。这就是您的错误消息总是被激发的原因

袁卓

2023-03-14

您的问题是按钮的默认类型是submit，因此通过使用，您也将此按钮声明为submit按钮，从而触发表单的submit功能。

要解决此问题，请将非提交按钮的类型设置为button（您可以省略提交类型，因为这是默认值）

现在,您可以根据需要处理“取消”和“列表”按钮的逻辑：

<button class="btn btn-primary" id="save" name="save">Save</button>
                <button type="button" class="btn btn-warning" id="cancel" name="cancel">Cancel</button>
                <button type="button" class="btn btn-success" id="list" name="list">List</button>

null

//When Save button is clicked, stop form submitting and run validation using jQuery
            $("form").submit(function (e) {

                var errorMessage = "";
  
                if($("#surname").val() == "") { 
                    errorMessage += "Please input a surname.<br>"  //If field is empty, append to errorMessage string
                }

                if($("#name").val() == "") { 
                    errorMessage += "Please input a name.<br>"
                }
                
                if($("#address").val() == "") { 
                    errorMessage += "Please input an address.<br>"
                }

                if($("#email").val() == "") { 
                    errorMessage += "Please input an email address.<br>"
                }

                if((!($('#male').prop('checked'))) && (!($('#female').prop('checked')))) {
                    errorMessage += " Please input a gender.<br>";
                }

                if($("telephone").val() == "") { 
                    errorMessage += "Please input a telephone number.<br>"
                }

                //If there is an error message
                if(errorMessage != "") {

                    //Set html to display error message 
                    $("#error").html('<div class="alert alert-danger" role="alert"><p>Please fill your form:</p>' + errorMessage + '</div>');
    
                    return false;  //Don't submit the form

                } else {
    
                    //Submit the form if no error
                    return true;
   
                }

            });

html lang-html prettyprint-override"><!--Bootstrap CSS-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">


        <div class="container">

            <!--Display error message or success message, both won't happen same time-->
            <div id="error"><? echo $message; ?></div>

            <form method="post" id="myform">
                <div class="form-group">
                    <label for="surname">Surname</label>
                    <input type="text" class="form-control" id="surname" name="surname">
                </div>

                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" class="form-control" id="name" name="name">
                </div>

                <div class="form-group">
                    <label for="address">Address</label>
                    <input type="text" class="form-control" id="address" name="address">
                </div>

                <div class="form-group">
                    <label for="email">Email Address</label>
                    <input type="email" class="form-control" id="email" name="email">
                </div>

                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" class="form-check-input" id="male" name="gender" value="Male"> Male
                  </label>
                </div>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" class="form-check-input" id="female" name="gender" value="Female"> Female
                    </label>
                </div>

                <div class="form-group">
                    <label for="telephone">Telephone Number</label>
                    <input type="number" class="form-control" id="telephone" name="telephone">
                </div>
                
                <button class="btn btn-primary" id="save" name="save">Save</button>
                <button type="button" class="btn btn-warning" id="cancel" name="cancel">Cancel</button>
                <button type="button" class="btn btn-success" id="list" name="list">List</button>

            </form>

        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

类似资料：

jQuery EasyUI 表单 – 表单验证

pre { white-space: pre-wrap; } 本教程将向您展示如何验证一个表单。easyui 框架提供一个 validatebox 插件来验证一个表单。在本教程中，我们将创建一个联系表单，并应用 validatebox 插件来验证表单。然后您可以根据自己的需求来调整这个表单。创建表单（form）让我们创建一个简单的联系表单，带有 name、email、subject 和 mes
Jquery表单验证插件

目前支持对以下格式的值进行验证： cnum*-*(纯数字), char*-*(纯字母), zwen*-*(中文), bysc*-*(字母开头), mail(邮箱), yzbm(邮政编码) * 其中的‘*’表示长度，比如“zwen1-5”表示中文1-5位的长度。同时支持“zwen”（只能是中文），“zwen5-*”(5位长度的文字)，其他的数据类型如同上面所示。
jquery 表单验证之通过 class验证表单不为空

本文向大家介绍jquery 表单验证之通过 class验证表单不为空，包括了jquery 表单验证之通过 class验证表单不为空的使用技巧和注意事项，需要的朋友参考一下在开发系统时，往往都有某些表单数据为必填项，若用jQuery通过ID去验证，不仅会影响效率，还会有所遗漏，不易于后期维护。本章将介绍如何利用jQuery，通过为表单配置class进行统一验证。（ID一个页面只可以使用一次；cl
jQuery EasyUI提交表单验证

本文向大家介绍jQuery EasyUI提交表单验证，包括了jQuery EasyUI提交表单验证的使用技巧和注意事项，需要的朋友参考一下 EasyUI的form表单里面的验证框，先讲解下validatebox类和相关的属性。验证规则验证规则是通过使用 required 和 validType 特性来定义的，这里是已经实施的规则： email：匹配 email 正则表达式规则，系统提供的属性
jquery validation验证表单插件

本文向大家介绍jquery validation验证表单插件，包括了jquery validation验证表单插件的使用技巧和注意事项，需要的朋友参考一下 jQuery验证表单插件——jquery-validation The jQuery Validation Plugin provides drop-in validation for your existing forms, while ma
jquery实现简单的表单验证

本文向大家介绍jquery实现简单的表单验证，包括了jquery实现简单的表单验证的使用技巧和注意事项，需要的朋友参考一下 jquery如何实现简单的表单验证，我们先跟大家分享一下实现思路。大概思路: 先为每一个required添加必填的标记，用each()方法来实现。在each()方法中先是创建一个元素，然后通过append()方法将创建的元素加入到父元素后面。这里面的this用的很精髓

jQuery表单验证仅保存按钮

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档