Jquery在点击提交按钮时，如果表单被验证

Jquery when click on submit button, if the form is validated

本文关键字：如果 表单 验证 按钮 提交 Jquery      更新时间：2023-09-26

我制作了一个表单，当点击提交时，它会带你到另一个网页，但我无法通过Javascript将变量(表单值)从一个网页转移到另一个网页。

所以，我想隐藏数据，当提交按钮点击。

如何检查表单是否被验证，然后才启动Jquery。在当前的逻辑下，即使表单没有初始化，它也会初始化Jquery。

最终，动画或隐藏标题和整个表单，并将其更改为结果。

<head>
    <title>Food Web App</title>
    <link rel="stylesheet" type="text/css" href="appStyleQues.less">
    <link href='http://fonts.googleapis.com/css?family=Orbitron:500' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Mono:300' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="N:'Desktop'Javascript'App.js" type="text/javascript"></script>
</head>
<body>
    <div id="main">
        <header>
            <h1>I need some data</h1>
        </header>
        <div id="ques">
            <ul>
                <form name="myForm" method="get">
                    <li>What cuisine?(You can leave it empty)
                        <br>
                        <input list="Cuisines" class="normal" type="text" name="Cuisine" placeholder="Like Chinese" pattern="Chinese|Italian|American">
                        <datalist id="Cuisines" autocomplete="off">
                            <option value="Chinese"></option>
                            <option value="Italian"></option>
                            <option value="American"></option>
                        </datalist>
                    </li>
                    <li>On a scale of 1 to 10, how much hungry are you?
                        <br>
                        <input class="normal" type="number" name="hunger" min="1" max="10" required>
                    </li>
                    <li>
                        <input class="special" type="checkbox" name="Personality" value="Vegetarian" checked> Vegetarian
                        <input class="special" type="checkbox" name="Personality" value="Non-Vegetarian"> Non-Vegetarian
                    </li>
                    <li>On a scale of 1 to 10, how much healthy do you want the food to be?
                        <br>
                        <input class="normal" type="number" name="Calories" min="1" max="10" required>
                    </li>
                    <li>What will be the max cost of the food, per person?
                        <br>(Quality of the food will be affected)
                        <br>
                        <input class="normal" type="number" name="quality" placeholder=" Like 400" step="50" autocomplete="off" required>
                    </li>
                    <li>How many people?
                        <br>
                        <input class="normal" type="number" name="Amount of people" required>
                    </li>
                    <li>
                        <input class="normal" type="submit" onclick="return a();">
                    </li>
                </form>
            </ul>
        </div>
    </div>
</body>
</html>

下面是一个非常基本的函数，但是会给你指明正确的方向:

$("form").submit(function(e){
    e.preventDefault();
    var url = "test2.html";
    var appendix = "?";
    var validated = false;
    // Validation
    $("form input").each(function() {
        // Validation stuff here.
        // A basic example:
        if ($(this).val() == "") {
            alert("Please add all fields.");
            return false;
        }
        else validated = true;
    })
    if (validated == true) {
        $("form [name]").each(function() {
            appendix += this.name + "=" + this.value + "&";
        })  
        window.location.href = url + appendix;  
    }   
})

您需要为您的提交按钮添加一个值

您可以为所有输入标记分配id，然后使用$('#idofinputfield').val()访问值。你还应该使用一个链接或按钮，并在javascript中注册一个onclick事件处理程序

$( "#idofbuttonorlink" ).click(function() {
  alert( "Handler for .click() called." );
  //validation and further action
});

。如果你想继续使用提交按钮，你可以使用提交事件处理程序，它允许你在验证失败时取消提交:

$( "#idofsubmitbutton" ).submit(function( event ) {
   alert( "Handler for .submit() called." );
   //validation and further action
   event.preventDefault(); //use this function to cancel submission
});
相关文章：