如何在窗体中使用多个按钮解决验证问题

How to solve validation using multiple buttons in a form

本文关键字：按钮 解决 验证 问题 窗体      更新时间：2023-09-26

我有一个表单，其中包含许多用户可以填写的文本框。在表单的底部，我有两个按钮。一个用于取消，一个用于提交。如下例所示

<form action='bla.php' method='post'>
    <input type='text' name='someTextField1'>
    <input type='text' name='someTextField2'>
    <input type='text' name='someTextField3'>
    <input type='submit' name='submit'>
    <input type='submit' name='cancel'>
</form>
我

有一个js函数来检查字段中的数据，我曾经用于两个按钮。因此，我以以下形式引用js函数：

<form action='bla.php' method='post' name='form' onSubmit='return CheckFields()'>

js 函数如下所示：

function CheckFields() {
    var formname = "form";
    var x = document.forms[formname]["someTextField1"].value;
    var result = true;
    var text = "";
    if (x == null || x == "") {
        text += "Dont forget about the someTextField1.'n";
        result =  false;
    }
    if(!result)
        alert(text);
    return result;
}

现在我希望这个 js 函数仅在使用提交而不是取消按钮时运行。当我尝试将对函数的调用移动到提交按钮时，如下所示，它不起作用： 

<input type='submit' name='submit' onClick='return CheckFields()'>
<input type='submit' name='cancel'>

为什么？解决这个问题的最聪明的方法是什么？我应该在表单中保留对 CheckFields（） 的调用并在脚本中检查单击了哪个按钮，还是应该重新制作函数以使用按钮？有人有想法或例子吗？

将

<input type='submit' name='cancel'>替换为<input type='button' name='cancel'>。
您的版本实际上有两个提交按钮，这两个按钮都将提交表单。

观看此示例 http://jsfiddle.net/355vw560/

<form action='bla.php' method='post' name="form">
<input type='text' name='someTextField1'>
<input type='text' name='someTextField2'>
<input type='text' name='someTextField3'>
    <br/>
<input type='submit' name='submit' onclick="return window.CheckFields()">
<input type='submit' name='cancel' value="cancel" onclick="return false;">

无论如何，最好使用 jQuery 或事件侦听器，而不是直接在 DOM 中管理事件。

该函数不起作用，因为它的作用域是元素，如果您将窗口指定为上下文，则函数将起作用。

首先，如果你想在提交之前使用javascript检查所有字段，则不需要在表单上有一个提交按钮。

我认为最聪明的方法如下：

您的表单（无操作、提交按钮和方法。仅使用 id 标识每个组件）： 

<form id="formId">
    <input type='text' id="text1">
    <input type='text' id="text2">
    <input type='text' id="text3">
    <input type='button' id="accept">
    <input type='button' id="cancel">
</form>

你的javascript（你必须添加jQuery）：

jQuery("#formId").on("click", "#accept", function(){  //listen the accept button click
    if(CheckFields()){ //here you check the fields and if they are correct
                       //then get all the input values and do the ajax call sending the data
        var text1 = jQuery("#text1").val();
        var text2 = jQuery("#text2").val();
        var text3 = jQuery("#text3").val();
        jQuery.ajax({
            url: "bla.php",
            method: "POST",
            data: {
                "someTextField1":text1, //In your example "someTextField1" is the name that the bla.php file is waiting for, so if you use the same here, it's not needed to change anything in your backend.
                "someTextField2":text2,
                "someTextField3":text3
            },
            success: function(){
                //here you can do whatever you want when the call is success. For example, redirect to other page, clean the form, show an alert, etc.
            }
        });
    }
});
jQuery("#formId").on("click", "#cancel", function(){ //here listen the click on the cancel button
 //here you can clean the form, etc
});
function CheckFields() {        //here I did a little change for validating, using jQuery.
    var x = jQuery("#text1").val();
    var result = true;
    var text = "";
    if (x == null || x == "") {
        text += "Dont forget about the someTextField1.'n";
        result =  false;
    }
    if(!result)
        alert(text);
    return result;
}

希望对您有所帮助！

I handle it with this way , Hope it will help.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <form method="post" action="/">
        <div class="container" style="background: #efefef; padding: 20px;">
            <label>Encrypt and decrypt text with AES algorithm</label>
            <textarea name="inputText" id = "inputText" rows="3" cols="100" placeholder="Type text to Encrypt..." maxlength="16" ></textarea>
            <br>
            <br>
            <textarea name="inputKey" id = "inputKey" rows="1" cols="100" placeholder="Type key to Encrypt'Decrypt text with..." maxlength="16"></textarea>
            <br>
            <br>
            <label>SBox :</label>
            <div>
                <div class="s-box-radios">
                    <ul class="sbox">
                        <li>
                            <label>SBox 1
                                <input id="sbox1" name="sboxOption" type="radio" value="option1"  required/>
                            </label>
                        </li>
                        <li>
                            <label>SBox 2
                                <input id="sbox2" name="sboxOption" type="radio" value="option2" />
                            </label>
                        </li>
                        <li>
                            <label>SBox 3
                                <input id="sbox3" name="sboxOption" type="radio" value="option3" />
                            </label>
                        </li>
                        <li>
                            <label>SBox 4
                                <input id="sbox4" name="sboxOption" type="radio" value="option4" />
                            </label>
                        </li>
                    </ul>
                </div>
                <div class="s-box-display">
                    <textarea rows="5" cols="10"></textarea>
                </div>
            </div>
            <div class="clear"></div>
            <br>
            <label>Result of Decryption in plain text</label>
            <textarea name="inputCipher" rows="3" cols="100" placeholder="Encrypted Texts..." name="decrpyted"></textarea>
            <br>
            <input type="submit" value="Encrypt" name="Encrypt" id ="encrypt" onclick="valEncrypt()" />
            <input type="submit" value="Decrypt" name="Decrypt" id ="decrypt" onclick="valDncrypt()" />
        </div>
    </form>
  <script>
    function valEncrypt()
    {
        var inputText = document.getElementById('inputText');
        var inputkey = document.getElementById('inputKey');
        if (inputText.value.length <16)
          {
            doAlert(inputText);
            return false;
          }
        else
          {
            removeAlert(inputText);
          }
        if (inputkey.value.length <16)
          {
            doAlert(inputkey);
            return false;
          }
        else
          {
            removeAlert(inputkey);
          }

    }
    function  valDncrypt()
    {
       var inputkey = document.getElementById('inputKey');
       if (inputkey.value.length <16)
          {
            doAlert(inputkey);
            return false;
          }
      alert('!Success');
    }
    function doAlert(element){
      element.style.border = "1px solid #FF0000";
    }
    function removeAlert(element){
      element.style.border = "1px solid #000000";
    }
  </script>
</body>
</html>
相关文章：