Question

我有一个简单的表单，我正在尝试使用javascript来验证来自但我无法让它工作，我不确定我做错了什么。我使用相同的代码来验证另一个项目上的表单，但是由于某种原因，代码不能与另一个表单一起使用。

这是代码

<head>
<script type="text/javascript">
function validate(){
    if(document.contactForm.email.value===""){ 
    alert("Please provide a valid email");
    document.contactForm.email.focus();
    return false;
  }
}
</script>
</head>

    <form name="contactForm" method="POST" id="contactForm" onsubmit="return(validate()">
<table>
    <tr>
        <td><input name="name" id="name" class="fields" type="text" placeholder="name"></td>            
    </tr>
    <tr>
        <td><input name="email" class="fields" type="email" placeholder="email"></td>            
    </tr>
    <tr>
        <td><input name="phone" class="fields" type="phone" placeholder="phone(optional)"></td>            
    </tr>

    <tr>
        <td><textarea name="message" class="fieldsMessage" name="message" placeholder="Message"></textarea></td>            
    </tr>

    <tr>
        <td><input class="submitButton" type="submit" name="submit" value="Submit"></td>
    </tr>

</table>
</form>

Answer 1

你可以使用

<input type="email" name="email" required="required" />

html5会自动为您验证。或者你可以使用这个

$("document").ready();

function checkForm(formObj){
$("#table td>span").remove();
        var msg="";
        for (var i=0; i < formObj.elements.length; i++) {
               // check if the form element has a validate attribute. 
               if (formObj.elements[i].name !=null && 
                 formObj.elements[i].getAttribute("validate")){
                 var validationRule = 
                   eval(formObj.elements[i].getAttribute("validate"));
                   if (!validationRule.test(formObj.elements[i].value)||formObj.elements[i].value==""){ 
                    var obj = formObj.elements[i].parentNode; 
                   // add a !!! mark on the validate field 
                    if (obj.nodeName=="TD")
            var dialog = formObj.elements[i].getAttribute("validateMsg")+"\n";
            msg +=  dialog;
                     obj.innerHTML = 
                       obj.innerHTML +"<span style='color:red; font-size:12px;' >"+ dialog +"</span>"; 
                   }//--> end test regExp
                 }//--> end if element has validate attribute
                }// end loop through the form elements. 
               if (msg.length > 0){
                 return false;
               }
                 else{
                  return true;
                 }
            }//--> end function

html表格：

<form method="post" onsubmit="return checkForm(this);" name="frm">
  <table width="430px" id="table">
    <tr>
      <td>
        <input type="text" name="name" validatemsg="please enter your name" validate="/^[a-zA-Z ]*$/" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" name="email" validatemsg="PLease enter email"
        validate="/^([\w]+)(.[\w]+)*@([\w]+)(.[\w]{2,3}){1,2}$/" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" name="subject" validatemsg="plaese enter the subject" validate="/^[a-zA-Z1-9 ]*$/" />
      </td>
    </tr>
  </table>
</form>

Answer 2

这一行是你的主要问题......

<form name="contactForm" method="POST" id="contactForm" onsubmit="return(validate()">

应该是

<form name="contactForm" method="POST" id="contactForm" onsubmit="return validate();">

此外，您可能希望将电子邮件值设置为“”，如此...

<input name="email" class="fields" type="email" placeholder="email" value="">

因为验证email.value ===“”可能不会返回true，否则

JS表单验证问题

2 个答案: