JS表单验证不起作用

时间:2012-12-03 15:05:38

标签: php javascript html forms validation

我正在尝试使用JS函数验证某些表单字段,但是当单击提交按钮时,它们似乎不会加载或检查字段。

<html>
  <body>
    <?php require_once('logic.php'); ?>
    <h1>Add new Region/Entity</h1>
    <?php 
      if ($_POST['submitted']==1) {
        echo $error;
      }
    ?>
    <form action="logic.php" method="post" name="registration" onSubmit="return formValidation();">
      Region: <input type="text" name="region" value="<?php echo @$_POST['region']; ?>"><br>
      Description: <br><textarea name="description" cols="50" rows="10"><?php echo @$_POST['description']; ?></textarea><br>
      Remarks: <input type="text" name="remarks" value="<?php echo @$_POST['remarks']; ?>">
      <input type="hidden" name="submitted" value="1"><br>
      <input type="submit" value="Submit" onclick="">

这是JS:

<script type="text/javascript">
  function formValidation() {
    var region = document.registration.region;
    var descr = document.registration.description;
    var remarks = document.registration.remarks;
    if(empty_validation()) {
      if(reg_validation()) {
        if(reg_letters()) {
          if (desc_letters()) {
            if (desc_validation()) {

            }
          }
        }
      }
    }
    return false;
  }
  function empty_validation() {
    var reg_len = region.value.length;
    var descr_len = descr.value.length;
    var rem_len = remarks.value.length;
    if (reg_len == 0 || decr_len == 0 || rem_len == 0) {
      alert("Please fill all the fields");
      return false;
    }
    return true;
  }
  function reg_validation() {
    if (reg_len > 50) {
      alert("Only 50 characters are allowed in the Region field");
      region.focus();
      return false;
    }
    return true;
  }
  function reg_letters() {
    var letters = /^[A-Za-z]+$/;
    if(region.value.match(letters)) {
      return true;
    } else {
      alert('Region field must have only alphabetical characters');
      region.focus();
      return false;
    }
  }
  function desc_validation() {
    if (descr_len > 500) {
      alert("Only 500 characters are allowed in the description field");
      descr.focus();
      return false;
    }
    return true;
  }
  function desc_letters() {
    var iChars = "!@#$%^&*()+=-[]\\\';,./{}|\":<>?";
    for (var i = 0; i < descr_len; i++) {
      if (iChars.indexOf(descr.value.charAt(i)) != -1) {
        alert ("Your description has special characters. \nThese are not allowed.\n Please remove them and try again.");
        return false;
      }
    }
    return true;
  }
</script>
</form>
</body>
</html>

如您所见,我将表单中的值发布到PHP文件中。我已使用表单标记中的onSubmit事件初始化formValidation()函数。由于某种原因,它无法运作。

如果您需要,请a working example

1 个答案:

答案 0 :(得分:1)

我不会修复你的每一个小错误,但主要的问题是变量没有定义在你期望的位置。您不能在一个函数中声明一个变量,并希望它在下一个函数中可用(不将其作为参数传递或全局声明)。例如,您的empty_validation函数应为:

function empty_validation(region, descr, remarks) {
    var reg_len = region.value.length;  
    var descr_len = descr.value.length;  
    var rem_len = remarks.value.length;  

    if (reg_len == 0 || decr_len == 0 || rem_len == 0) {
        alert("Please fill all the fields");  
        return false;  
    }
    return true;  
}

formValidation函数中,您可以这样称呼它:

if(empty_validation(region, descr, remarks)) {

这只是一个例子,您需要在几个地方进行。

其他一些事项 - 您总是从false返回formValidation ...您的意思是将return true;置于最内层的if声明中吗?此外,由于你似乎正在做的就是调用每个函数,你可以将它们放入一个大的if语句中,如下所示:

if (empty_validation() && reg_validation() && reg_letters() && desc_letters() && desc_validation()) {
    return true;
}
return false;