好的,所以我将表单设置为我的PHP页面。我还将提交按钮onsubmit
设置为我的验证javascript。会发生什么,它直接进入我的PHP页面,并不验证输入?我错过了什么?我有这个设置吗?如果我从表单中删除php文件,javascript validate工作正常。它试图一起使用php和javascript让我疯狂。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link rel="stylesheet" type="text/css" href="styles/styles_Final.css"/>
<title>contact.html</title>
<script type= "text/javascript" src = "scripts/validator.js"></script>
</head>
<div id="right-cont">
<form name = "contact_Us" action="http://nova.umuc.edu/cgi-bin/cgiwrap/ct386a28/eContact.php" method = "post">
<div id="style2">
<p>Please enter contact information below:</p>
</div>
<div class="style7">
<label>First Name: </label>
<br /><input type="text" name = "firstName" id="firstName" tabindex="1"
style="width: 176px" />
</div>
<div class="style7">
<label>Middle Name: </label>
<br /><input type="text" name = "middleName" id ="middleName" tabindex="2"
style="width: 176px" />
</div>
<div class="style7">
<label>Last Name: </label>
<br /><input type="text" name = "lastName" id ="lastName" tabindex="3"
style="width: 176px" />
</div>
<div class="style8">
<label>Questions and/or comments: </label>
<br /> <textarea name = "comment" id = "comment" rows = "10" cols = "60"></textarea>
</div>
<div class =" buttons">
<input type="submit" value="SUBMIT" onclick = "return validate()"/><input type="reset" value="CLEAR"/> <br />
</div>
</div>
</form>
</div>
的 的 ** * ** * ** * 的** * ** JAVASCRIPT 的 * ** * ** * ** * ** * ** * ** * ** * ** * *
function validate() {
//create references
var fName;
var mName;
var lName;
var email;
var phone;
fName = document.getElementById('firstName').value;
mName = document.getElementById('middleName').value;
lName = document.getElementById('lastName').value;
email = document.getElementById('email').value;
//validate the phone number
phone = document.getElementById('phone').value;
var boolean = isPhoneNumber(phone);
if (!boolean)
{
alert("Please enter valid phone number format: ddd-ddd-dddd.");
return false;
}
//validate the email address
email_Val()
//validate the first name
var fN=document.forms["contact_Us"]["firstName"].value
if (fN==null || fN=="")
{
alert("Please fill in first name.");
return false;
}
//validate the last name
var lN=document.forms["contact_Us"]["lastName"].value
if (lN==null || lN=="")
{
alert("Please fill in last name.");
return false;
}
}
function isPhoneNumber(phone)
{
var str = /^\(?[2-9]\d{2}[\)\.-]?\s?\d{3}[\s\.-]?\d{4}$/
return str.test(phone);
}
function email_Val()
{
var eM=document.forms["contact_Us"]["email"].value
var x=eM.indexOf("@");
var y=eM.lastIndexOf(".");
if (x<1 || y<x+2 || y+2>=eM.length)
{
alert("Please enter a valid e-mail address");
return false;
}
}
答案 0 :(得分:2)
以下是指向代码的工作版本的链接:JSFiddle link
最简单的纠正方法就是确保将javascript包含在文档的head
中,无论是指向外部文件的链接(最好是还是HTML)。然后,检查javascript中的语法错误,这有时可能导致代码无法正常执行(或根本不执行)。
在您的情况下,您还尝试访问代码中不存在的字段,这会导致错误,并且当引发错误时,浏览器停止验证并仅提交表单。
以下是您的代码的工作版本:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>contact.html</title>
<script type="text/javascript">
function runValidate()
{
//create references
var fName;
var mName;
var lName;
var email;
var phone;
fName = document.getElementById('firstName').value;
mName = document.getElementById('middleName').value;
lName = document.getElementById('lastName').value;
//validate the first name
var fN=document.forms["contact_Us"]["firstName"].value;
if (fN==null || fN=="")
{
alert("Please fill in first name.");
return false;
}
//validate the last name
var lN=document.forms["contact_Us"]["lastName"].value;
if (lN==null || lN=="")
{
alert("Please fill in last name.");
return false;
}
}
function isPhoneNumber(phone)
{
var str = /^\(?[2-9]\d{2}[\)\.-]?\s?\d{3}[\s\.-]?\d{4}$/
return str.test(phone);
}
function email_Val()
{
var eM=document.forms["contact_Us"]["email"].value
var x=eM.indexOf("@");
var y=eM.lastIndexOf(".");
if (x<1 || y<x+2 || y+2>=eM.length)
{
alert("Please enter a valid e-mail address");
return false;
}
}
</script>
</head>
<body>
<div id="right-cont">
<form name = "contact_Us" action="http://nova.umuc.edu/cgi-bin/cgiwrap/ct386a28/eContact.php" method = "post">
<div id="style2">
<p>Please enter contact information below:</p>
</div>
<div class="style7">
<label>First Name: </label>
<br /><input type="text" name = "firstName" id="firstName" tabindex="1"
style="width: 176px" />
</div>
<div class="style7">
<label>Middle Name: </label>
<br /><input type="text" name = "middleName" id ="middleName" tabindex="2"
style="width: 176px" />
</div>
<div class="style7">
<label>Last Name: </label>
<br /><input type="text" name = "lastName" id ="lastName" tabindex="3"
style="width: 176px" />
</div>
<div class="style8">
<label>Questions and/or comments: </label>
<br /> <textarea name = "comment" id = "comment" rows = "10" cols = "60"></textarea>
</div>
<div class =" buttons">
<input type="submit" value="SUBMIT" onclick="return runValidate();"/><input type="reset" value="CLEAR"/> <br />
</div>
</div>
</form>
</div>
答案 1 :(得分:1)
你是否肯定包含validate()函数的javascript包含在你的php中?在页面上执行查看源并仔细检查。
答案 2 :(得分:1)
尝试提交按钮的以下代码:
<input type="submit" value="SUBMIT" onclick = "validate()"/><input type="reset" value="CLEAR"/> <br />
答案 3 :(得分:1)
我注意到您的Javascript代码中存在一些语法错误,但您也尝试访问未在HTML中声明的字段(例如电话和电子邮件)。我已经修改了你的Javascript,它做了我认为你应该做的事情:
function validate()
{
//create references
var fName;
var mName;
var lName;
var email;
var phone;
fName = document.getElementById('firstName').value;
mName = document.getElementById('middleName').value;
lName = document.getElementById('lastName').value;
//validate the first name
var fN=document.forms["contact_Us"]["firstName"].value;
if (fN==null || fN=="")
{
alert("Please fill in first name.");
return false;
}
//validate the last name
var lN=document.forms["contact_Us"]["lastName"].value;
if (lN==null || lN=="")
{
alert("Please fill in last name.");
return false;
}
}