shiva shiva - 4 months ago 12
HTML Question

validation gives an error of uncaught reference

Hello I have created a page using bootstrap but now I am facing form validation problem. I tried all possible medium using required attribute also. But event is not getting generated on clicking the button. Its a easiest question but still I am in trouble. Please provide me guidance
This is Home.html page









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>




Answer

Your problem is probably that you didn't include jQuery. Bootstrap's JS requires you to have jQuery loaded beforehand because that's what it's based on.

Also, you trigger your validate() on submit, but you have a button instead of a submit input. Changing that to <input type="submit" class="btn btn-danger" value="SAVE $150"> should do the trick.

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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!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>
								<input type="submit" class="btn btn-danger" value="SAVE $150">
								</input>
							</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>

	</body>

</html>