联系表格 - 客户端验证无效(document.ready)

时间:2013-05-12 10:15:17

标签: javascript client-side-validation onsubmit document-ready

我有一个简单的联系表格,包括姓名,电邮,留言。提交时,表单提交到php页面并发送电子邮件。我遇到的问题是客户端验证。由于某种原因,它没有输入document.ready。有人能帮我弄清楚出了什么问题吗?

客户端验证:

$(document).ready(function(){
$("#form1").on("submit", function(e){
//$("#saveForm").click(function(e){
alert("in document ready!");

var m1 = document.form1.name; //name
var m2 = document.form1.email; //email
var m3 = document.form1.comment; //message


if(m1.value == "" || m2.value == "" || m3.value == "") //check mandatory fields are filled
{
document.getElementById('error').innerHTML = "Please enter the missing mandatory fields, marked with an asterisk (*), and re-submit.";
document.form1.saveForm.disabled=false;
return false;
}           
else 
{
return true;
 }
});
});

表格:

<form id="form1" name="form1" autocomplete="off" method="post" action="EmailForm.php">

<p id="error" style="font-weight:bold; font-size:13px; color:red; margin-top: 7px; margin-left: 11px;" name="error"></p>

<!-- start content -->
<table>
    <tr>
        <td>
            <label for="nameTxt" class="fieldTxt"> Name <span class="man">*</span></label>
        </td>
        <td>
            <input id="nameTxt" name="name" type="text" class="field text large" value=""   maxlength="255" tabindex="1"/>
        </td>
    </tr>

    <tr>
        <td>
            <label for="emailTxt" class="fieldTxt"> Email Address<span class="man">*</span></label>
        </td>
        <td>
            <input id="emailTxt" name="email" type="text" class="field text large" value="" maxlength="255" tabindex="2" onChange="checkEmail(document.form1.email.value,document.form1.email)"/> 
        </td>
    </tr>

    <tr>
        <td>
            <label for="commentTxt" class="fieldTxt"> Message <span class="man">*</span> </label>
        </td>
        <td>
            <textarea id="commentTxt"  name="comment" class="field textarea medium" rows="5" cols="50"tabindex="3"></textarea> 
        </td>
    </tr>

    <tr>
    <td align="right">
    <ul style="list-style-type: none;">
    <li class="submit">


            <p id="contact-btn">
              <input id="saveForm" name="saveForm" class="contact-btn" type="submit" value="submit"/>
            </p>

        </li>
       </ul>
    </td>
    </tr>
    </table>
    </form>

0 个答案:

没有答案