验证给出了未捕获引用的错误

时间：2016-07-16 20:30:37

标签： javascript html validation

您好我已经使用bootstrap创建了一个页面，但现在我面临表单验证问题。我也尝试了使用必需属性的所有可能的媒体。但是单击按钮时不会生成事件。这是一个最简单的问题，但我仍然遇到麻烦。请给我指导 这是Home.html页面

function validate(){
var name=document.myForm.fname.value;  
var email=document.myForm.femail.value;  
 var num = document.myForm.fnumber.value;
  
  if(name== null || email== null || num== null){
  
      alert("Please fill out the fields")
	  return false;
  }
  
  else if(name== null && email== null){
  
    alert("Enter name and email");
	return false;
  }
  
  }
body, h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}

.site-nav {
    border-bottom: 10px solid #e02517;
    padding: 10px;
    margin-bottom: 0px
}

/*hr.firstline
{
 margin-top: -20px;
    margin-bottom: 37px;
    border: 0;
    border-top: 13px solid #e02517;
}*/
hr
{
	margin-top: 0px;
    margin-bottom: 20px;
    border: 0;
    border-top: 16px solid #337ab7;
}
.navbar-default .navbar-nav>li {
    color: #777;
    margin-left: 396px;
    margin-top: 4px;
}

.title{
	font-weight: 700;
    font-size: x-large;
    color: #cc0d0d;
}

.subtitle{
	
	    margin: 0 0 10px;
    font-size: medium;
    color: #337ab7;
}
.content{
	color: #cc0d0d;
	margin-top: -18px;
    margin-bottom: 0px;
}

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    background-color: #cc0d0d;
	height:51px;
}

.nav-inverse{
	
	background-color:none;
}

/*.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 0px solid transparent;
}*/

.navbar-inverse .navbar-nav>li>a {
    color: white;
    margin-left: 327px;
    font-size: 17px;
}

.content1{
	
	font-size: 18px;
	
}
.last{

    margin-top: -20px;
	border-top: 10px solid #337ab7;
}

.nav>li {
    position: relative;
    display: block;
    margin-bottom: -7px;
    margin-top: 18px;
    margin-left: 317px;
    color: white;
}

#content3{
	
	color:#cc0d0d;
	font-size:18px;
}

#content2{
	
	color:#337ab7;
	font-size:18px;
	margin-left: 190px;
}
#logo{
	
	vertical-align: middle;
    width: 77px;
    margin-bottom: 14px;
    margin-left: 230px;
	}
	
	#logo1 {
    vertical-align: middle;
    width: 130px;
    margin-bottom: 14px;
    margin-left: 8px;
}

.form1{
    
    margin-left: 44px;
    border: WHITE;
    width: 208px;
    margin-top:9px;
}
.form2{
    margin-left: 42px;
    border: WHITE;
    width: 206px;
    margin-top: 3px;
}

.form3{
    margin-left: 36px;
    border: WHITE;
    width: 208px;
    margin-top: 4px;
}

#first{
font-size: x-large;
    margin-top: -16px;
    align-items: center;
    
}

#first1{
    color:#cc0d0d;
}
#first2{
    
    color: #337ab7;
}

#second{
        font-size: 17px;
    margin-left: 19px;
}
#second1{
    color:#337ab7;
}

.btn{
	
	border-radius:-88px;
	width:140px;
}

.page-header {
    padding-bottom: -9px;
    /*margin: -9px 29px -21px;*/
    /*margin-bottom: 6px;
    margin-left: 2px;*/
    border-bottom: 2px solid #cc0d0d;
    border-bottom-width: -3px;
    border-radius: -64;
    margin: 20px 0 20px;
}

#content12{
    margin-left:42px;
    color:#337ab7;
    }
    .logo21{
        vertical-align: middle;
    margin-left: -34px;
    width: 397px;
}
    


.panel {
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    margin-top: -115px;
    width: 398px;
    /* margin-right: -7px; */
}
.panel-primary {
    border-color: #337ab7;
    margin-left: 371px;
}
.panel-heading {
    padding: 11px 15px;
    border-bottom: 4px solid transparent;
    font-size: 17px;
    border-top-left-radius: 1px;
    border-top-right-radius: 3px;
    background-color: white;
}

/** BANNER SECTION */

.banner-parent {
    height: 500px;
    overflow: hidden;
}

.banner {
    padding: 15px;
    background-color: #eee;
}

.banner-background {
    position: absolute;
    z-index: -1;
}

.banner-background img {
    width: 100%
}

#back1
{
   
   margin-top: -38px;
    width: 1140px;
    height: 509px;
}

.panel-primary {
    border-color: #337ab7;
    margin-left: 278px;
    margin-top: -70px;
    width: 584px;
}
<!DOCTYPE html>
<html lang="en">

<head>
	<title>Bootstrap Example</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	<!-- Optional theme -->
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="style1.css">

</head>

<body>
	<div class="container">
		<nav class="navbar navbar-default site-nav">
			<div class="container">
				<div class="navbar-header">
					<img id="logo" src="images\\logo.png">
					<img id="logo1" src="images\\logo1.jpg">
					<label id="content2"> CALL </label>
					<label id="content3">555-123-4567 </label>
					</LI>
				</div>
			</div>
		</nav>
		<div class="row">
			<div class="col-md-12 banner-parent">
				<div class="banner-background">
					<img id="back1" src="images\\back.png">
					<hr>
				</div>
				<div class="row">
					<div class="col-md-3"></div>
					<div class="col-md-6 text-center banner">
						<div class="page-header">
							<h3 id="first"><label id="first1"> PROFESSIONAL</label> <label id="first2"> PAINTERS </label> </h3>
							<h4 id="second"><label id="second1"> OF LARGO,CLEANWATER,TAMPA </label> </H4>
						</div>
						<h4 id="content12"> We Care About More Than Paint! </h4>
						<img src="images\\logo2.jpg" class="logo21">
                          	
		<form name="myForm" class="form-signin" method="post" action="welcome.html" onsubmit="return validate()">
							<label>NAME: </label>
							<input name="fname" type="text" class="form1">
							<br/>
							<label>EMAIL: </label>
							<input name="femail" type="email" class="form2">
							<br/>
							<label>PHONE: </label>
							<input name="fnumber" type="text" class="form3">
							<center>
								<button type="button" class="btn btn-danger">
									<label>SAVE $150
										</label>
								</button>
							</center>
						</form>
					</div>
					<div class="col-md-3"></div>
				</div>
				<div class="panel panel-primary">
					<div class="panel-heading"><span class="glyphicon glyphicon-ok-circle"></span>Quality Work &nbsp;
						<span class="glyphicon glyphicon-ok-circle"></span> Professional Painters &nbsp;
						<span class="glyphicon glyphicon-ok-circle"></span> Flexible Schedules
					</div>
				</div>
			</div>
		
		</div>
		
		<!-- End of header -->
		<div class="row">
			<div class="col-md-2">
			</div>
			<div class="col-md-8">
				<strong class="title">Professional Painters </strong> </br>
				<strong class="subtitle">Tackling Residential & Commerical Painting Projects</strong> </br>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida massa pharetra,
				tempor ligula ut,aliquet nulla. Quisque eu quam turpis. Sed portitor mauris nec quam dignissim, et placerat odio scelerisque. In hac 
				habitussa platea dictumst. Proin et accumsan nunc, sit amet bibenndum parus. Proin at euismod ante. 
					 Phasellus ipsum orcii feugiat tristique mollis vitae, sagittis sollicitudin libero.In lompus <br/>ex non ipsum prctium, ae
			 conseqaut justo fringilla. </p>
			</div>
			<div class="col-md-2">
			</div>
		</div>
		<!--End of first part -->
		<br/>
		<div class="row">
			<div class="col-md-2">
			</div>
			<div class="col-md-8">
				<strong class="subtitle">Why Clients Choose To Hire Our Team: </strong> </br>
				<p>
					<label class="content"> <img src="images\\listicon.png"> Mauris sit amet urna etleo pulvinar tristique </label>
				</p>
				<p>
					<label class="content"> <img src="images\\listicon.png"> Nameu eros mollis, interdum sapren tincidant accumsan erat. </label>
				</p>
				<p>
					<label class="content"> <img src="images\\listicon.png"> Maecenas rutrum libero ac drum volutpat, eu veucula risas molestre </label>
				</p>
				<p>
					<label class="content"> <img src="images\\listicon.png"> Mauris et tellus in lucas effucutar fringilla </label>
				</p>
				<p>
					<label class="content"> <img src="images\\listicon.png"> Naliam lacinia nulla eget quam ornaz blandit</label>
				</p>
				<p>
					<label class="content"> <img src="images\\listicon.png"> Sed mollis magna eu mi allquet scalerisque</label>
				</p>
			</div>
			<div class="col-md-2">
			</div>
		</div>
		<!-- End of 2nd part-->
		<div class="row">
			<div class="col-md-2">
			</div>
			<div class="col-md-8">
				<p>
					Donec allquem sit amet nisised consequent. Ttiam gravida nisi. Interdam et malesuada fames ac ante ipsum
					primia in faucibus. Aeneam feugiat lacinia velit non lacinia. Proin eget tristique leo.
				</p>
			</div>
			<div class="col-md-2">
			</div>
		</div>
		<!-- end of 3rd part-->
		<!-- footer navbar-->
		<nav class="navbar navbar-inverse">
			<div class="container-fluid">
				<div class="navbar-header">
				</div>
				<ul class="nav navbar-nav">
					<li>
						<label>SCHEDULE YOUR FREE ESTIMATE!</label>
						<label class="content1" style="
		font-size: 25px;  padding-left: 11px; padding-bottom: 0px;  padding-top: 7px; margin-top: -19px;"> 555-123-4567</label>
					</li>
				</ul>
			</div>
		</nav>
		<hr class="last">
	</div>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

		<script src="validation.js">
	</body>

</html>

2 个答案:

答案 0 :(得分：0)

您的问题可能是您没有包含jQuery。 Bootstrap的JS要求你事先加载jQuery，因为这是它的基础。

此外，您在提交时触发了validate（），但是您有一个按钮而不是提交输入。将其更改为$(document).ready(function() { $('.settings_color_btn').click(function() { var colorId = $(this).attr('id'); var colorIdFull = '#'+colorId; var color = $(colorIdFull).css('background'); $('.logged_inn_text').fadeTo('fast', 0.4, function() { $(this).css('background', color); }).fadeTo('fast', 1); return false; }); }); 应该可以解决问题。

<input type="submit" class="btn btn-danger" value="SAVE $150">
function validate(){
var name=document.myForm.fname.value;  
var email=document.myForm.femail.value;  
 var num = document.myForm.fnumber.value;
  
  if(name== "" || email== "" || num== ""){
  
      alert("Please fill out the fields")
	  return false;
  }
  
  else if(name== "" && email== ""){
  
    alert("Enter name and email");
	return false;
  }
  
  }
body, h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}

.site-nav {
    border-bottom: 10px solid #e02517;
    padding: 10px;
    margin-bottom: 0px
}

/*hr.firstline
{
 margin-top: -20px;
    margin-bottom: 37px;
    border: 0;
    border-top: 13px solid #e02517;
}*/
hr
{
	margin-top: 0px;
    margin-bottom: 20px;
    border: 0;
    border-top: 16px solid #337ab7;
}
.navbar-default .navbar-nav>li {
    color: #777;
    margin-left: 396px;
    margin-top: 4px;
}

.title{
	font-weight: 700;
    font-size: x-large;
    color: #cc0d0d;
}

.subtitle{
	
	    margin: 0 0 10px;
    font-size: medium;
    color: #337ab7;
}
.content{
	color: #cc0d0d;
	margin-top: -18px;
    margin-bottom: 0px;
}

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    background-color: #cc0d0d;
	height:51px;
}

.nav-inverse{
	
	background-color:none;
}

/*.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 0px solid transparent;
}*/

.navbar-inverse .navbar-nav>li>a {
    color: white;
    margin-left: 327px;
    font-size: 17px;
}

.content1{
	
	font-size: 18px;
	
}
.last{

    margin-top: -20px;
	border-top: 10px solid #337ab7;
}

.nav>li {
    position: relative;
    display: block;
    margin-bottom: -7px;
    margin-top: 18px;
    margin-left: 317px;
    color: white;
}

#content3{
	
	color:#cc0d0d;
	font-size:18px;
}

#content2{
	
	color:#337ab7;
	font-size:18px;
	margin-left: 190px;
}
#logo{
	
	vertical-align: middle;
    width: 77px;
    margin-bottom: 14px;
    margin-left: 230px;
	}
	
	#logo1 {
    vertical-align: middle;
    width: 130px;
    margin-bottom: 14px;
    margin-left: 8px;
}

.form1{
    
    margin-left: 44px;
    border: WHITE;
    width: 208px;
    margin-top:9px;
}
.form2{
    margin-left: 42px;
    border: WHITE;
    width: 206px;
    margin-top: 3px;
}

.form3{
    margin-left: 36px;
    border: WHITE;
    width: 208px;
    margin-top: 4px;
}

#first{
font-size: x-large;
    margin-top: -16px;
    align-items: center;
    
}

#first1{
    color:#cc0d0d;
}
#first2{
    
    color: #337ab7;
}

#second{
        font-size: 17px;
    margin-left: 19px;
}
#second1{
    color:#337ab7;
}

.btn{
	
	border-radius:-88px;
	width:140px;
}

.page-header {
    padding-bottom: -9px;
    /*margin: -9px 29px -21px;*/
    /*margin-bottom: 6px;
    margin-left: 2px;*/
    border-bottom: 2px solid #cc0d0d;
    border-bottom-width: -3px;
    border-radius: -64;
    margin: 20px 0 20px;
}

#content12{
    margin-left:42px;
    color:#337ab7;
    }
    .logo21{
        vertical-align: middle;
    margin-left: -34px;
    width: 397px;
}
    


.panel {
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    margin-top: -115px;
    width: 398px;
    /* margin-right: -7px; */
}
.panel-primary {
    border-color: #337ab7;
    margin-left: 371px;
}
.panel-heading {
    padding: 11px 15px;
    border-bottom: 4px solid transparent;
    font-size: 17px;
    border-top-left-radius: 1px;
    border-top-right-radius: 3px;
    background-color: white;
}

/** BANNER SECTION */

.banner-parent {
    height: 500px;
    overflow: hidden;
}

.banner {
    padding: 15px;
    background-color: #eee;
}

.banner-background {
    position: absolute;
    z-index: -1;
}

.banner-background img {
    width: 100%
}

#back1
{
   
   margin-top: -38px;
    width: 1140px;
    height: 509px;
}

.panel-primary {
    border-color: #337ab7;
    margin-left: 278px;
    margin-top: -70px;
    width: 584px;
}

答案 1 :(得分：0)

我认为这是因为您检查null的空表格inoput值，但实际上在这种情况下它们只有一个空字符串。

所以试试这个：

if (name === "" || email === "" || num === ""){

你也可以

if (name.length === 0 ...
相关问题
最新问题