Question

我的表格：

<form method="post" action="getQuote.php" onsubmit="check()">
    <table>
        <tr>
            <td>Name:</td>
            <td>
                <input id="idname" class="inputBox" name="name"/>
            </td>
        </tr>
        <tr>
            <td>Phone Number:</td>
            <td>
                <input id="idphone" class="inputBox" name="phone" />
            </td>
        </tr>
        <tr>
            <td>Moving From:</td>
            <td>
                <input id="idfrom" class="inputBox" name="from" />
            </td>
        </tr>
        <tr>
            <td>Moving To:</td>
            <td>
                <input id="idto" class="inputBox" name="to" />
            </td>
        </tr>
        <tr>
            <td>Date:</td>
            <td>
                <input id="iddate" class="inputBox" name="date" />
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td> &nbsp; </td>
        </tr>
        <tr>
            <td></td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button name="signup" class="myButton">
                <font style="color: #ffffff">Get A Quote</font>
                </button>
            </td>
        </tr>
    </table>
</form>

我的剧本：

<script>
    function check() {
        var n = document.getElementById(idname);
        var p = document.getElementById(idphone);
        var f = document.getElementById(idfrom);
        var t = document.getElementById(idto);
        var d = document.getElementById(iddate);
        var test1 = n.length;
        var test2 = p.length;
        var test3 = f.length;
        var test4 = t.length;
        var test5 = d.length;
        alert(test1);
        alert(test2);
        alert(test3);
        alert(test4);
        alert(test5);
    }
</script>

我将脚本称为表单的onsubmit函数，但页面未显示警告。相反，它将转到getQuote.php文件。谁能告诉我，问题是什么？我想，我错过了一些愚蠢的事情。

N.B：如果值为空，我还没有编写要比较的部分。只是检查值。

提前致谢。

Answer 1

试试吧

   <script>
        function check() {
            var n = document.getElementById('idname');
            var p = document.getElementById('idphone');
            var f = document.getElementById('idfrom');
            var t = document.getElementById('idto');
            var d = document.getElementById('iddate');
            var test1 = n.length;
            var test2 = p.length;
            var test3 = f.length;
            var test4 = t.length;
            var test5 = d.length;
            alert(test1);
            alert(test2);
            alert(test3);
            alert(test4);
            alert(test5);

        }
    </script>

Answer 2

onsubmit处理程序需要返回false，如果您不需要它继续提交表格。
请确保检查您正在检查的每个元素的value属性。

<强>形式：

<form method="post" action="getQuote.php" onsubmit="return check()">

<强>脚本：

<script>
  function check() {
    var n = document.getElementById(idname);
    var p = document.getElementById(idphone);
    var f = document.getElementById(idfrom);
    var t = document.getElementById(idto);
    var d = document.getElementById(iddate);
    var test1 = n.value.length;
    var test2 = p.value.length;
    var test3 = f.value.length;
    var test4 = t.value.length;
    var test5 = d.value.length;
    alert(test1);
    alert(test2);
    alert(test3);
    alert(test4);
    alert(test5);
    if (test1 == 0 || test2 == 0 || test3 == 0 || test4 == 0 || test5 == 0) {
      return false;
    }
    return true;
  }
</script>

Answer 3

如果删除表单控件上的ID并将类添加到需要具有值的类中，则可以使生活更轻松。然后你只需遍历所有的表单控件，并确保任何一个类，例如“required”，具有非空值，例如

// Helper
function hasClass(el, className) {
  var re = new RegExp('(^|\\s)' + className + '(\\s|$)');
  return re.test(el.className);
}

function checkForm(form) {
  var control, controls = form.elements;
  var allowSubmit = true;

  for (var i=0, iLen=controls.length; i<iLen; i++) {
    control = controls[i];

    if (hasClass(control, 'required') && control.value == '') {
      alert('Control ' + control.name + ' is missing a value.');
      allowSubmit = false;
    }
  }
  return allowSubmit;
}

现在，您可以根据需要添加任意数量的控件，只需为必须具有值的那些添加“必需”类。当使用不同类型的控件时，可以使上述内容更加复杂。

警告文本框是否为空

3 个答案: