0
こんにちは私はブートストラップを使用してページを作成しましたが、今はフォーム検証の問題に直面しています。私は必要な属性を使ってすべての可能な媒体を試しました。しかし、ボタンをクリックしてもイベントは生成されません。それは最も簡単な質問ですが、それでも私は困っています。私にガイダンスを提供してください これはあなたの問題は、あなたがjQueryのが含まれていなかったということはおそらくあり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")
\t return false;
}
else if(name== null && email== null){
alert("Enter name and email");
\t 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
{
\t 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{
\t font-weight: 700;
font-size: x-large;
color: #cc0d0d;
}
.subtitle{
\t
\t margin: 0 0 10px;
font-size: medium;
color: #337ab7;
}
.content{
\t color: #cc0d0d;
\t margin-top: -18px;
margin-bottom: 0px;
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
background-color: #cc0d0d;
\t height:51px;
}
.nav-inverse{
\t
\t 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{
\t
\t font-size: 18px;
\t
}
.last{
margin-top: -20px;
\t border-top: 10px solid #337ab7;
}
.nav>li {
position: relative;
display: block;
margin-bottom: -7px;
margin-top: 18px;
margin-left: 317px;
color: white;
}
#content3{
\t
\t color:#cc0d0d;
\t font-size:18px;
}
#content2{
\t
\t color:#337ab7;
\t font-size:18px;
\t margin-left: 190px;
}
#logo{
\t
\t vertical-align: middle;
width: 77px;
margin-bottom: 14px;
margin-left: 230px;
\t }
\t
\t #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{
\t
\t border-radius:-88px;
\t 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>
\t <title>Bootstrap Example</title>
\t <meta charset="utf-8">
\t <meta name="viewport" content="width=device-width, initial-scale=1">
\t <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
\t <!-- Latest compiled and minified CSS -->
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
\t <!-- Optional theme -->
\t <!-- Latest compiled and minified JavaScript -->
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
\t <link rel="stylesheet" href="style.css">
\t <link rel="stylesheet" href="style1.css">
</head>
<body>
\t <div class="container">
\t \t <nav class="navbar navbar-default site-nav">
\t \t \t <div class="container">
\t \t \t \t <div class="navbar-header">
\t \t \t \t \t <img id="logo" src="images\\logo.png">
\t \t \t \t \t <img id="logo1" src="images\\logo1.jpg">
\t \t \t \t \t <label id="content2"> CALL </label>
\t \t \t \t \t <label id="content3">555-123-4567 </label>
\t \t \t \t \t </LI>
\t \t \t \t </div>
\t \t \t </div>
\t \t </nav>
\t \t <div class="row">
\t \t \t <div class="col-md-12 banner-parent">
\t \t \t \t <div class="banner-background">
\t \t \t \t \t <img id="back1" src="images\\back.png">
\t \t \t \t \t <hr>
\t \t \t \t </div>
\t \t \t \t <div class="row">
\t \t \t \t \t <div class="col-md-3"></div>
\t \t \t \t \t <div class="col-md-6 text-center banner">
\t \t \t \t \t \t <div class="page-header">
\t \t \t \t \t \t \t <h3 id="first"><label id="first1"> PROFESSIONAL</label> <label id="first2"> PAINTERS </label> </h3>
\t \t \t \t \t \t \t <h4 id="second"><label id="second1"> OF LARGO,CLEANWATER,TAMPA </label> </H4>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <h4 id="content12"> We Care About More Than Paint! </h4>
\t \t \t \t \t \t <img src="images\\logo2.jpg" class="logo21">
\t
\t \t <form name="myForm" class="form-signin" method="post" action="welcome.html" onsubmit="return validate()">
\t \t \t \t \t \t \t <label>NAME: </label>
\t \t \t \t \t \t \t <input name="fname" type="text" class="form1">
\t \t \t \t \t \t \t <br/>
\t \t \t \t \t \t \t <label>EMAIL: </label>
\t \t \t \t \t \t \t <input name="femail" type="email" class="form2">
\t \t \t \t \t \t \t <br/>
\t \t \t \t \t \t \t <label>PHONE: </label>
\t \t \t \t \t \t \t <input name="fnumber" type="text" class="form3">
\t \t \t \t \t \t \t <center>
\t \t \t \t \t \t \t \t <button type="button" class="btn btn-danger">
\t \t \t \t \t \t \t \t \t <label>SAVE $150
\t \t \t \t \t \t \t \t \t \t </label>
\t \t \t \t \t \t \t \t </button>
\t \t \t \t \t \t \t </center>
\t \t \t \t \t \t </form>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="col-md-3"></div>
\t \t \t \t </div>
\t \t \t \t <div class="panel panel-primary">
\t \t \t \t \t <div class="panel-heading"><span class="glyphicon glyphicon-ok-circle"></span>Quality Work
\t \t \t \t \t \t <span class="glyphicon glyphicon-ok-circle"></span> Professional Painters
\t \t \t \t \t \t <span class="glyphicon glyphicon-ok-circle"></span> Flexible Schedules
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t
\t \t </div>
\t \t
\t \t <!-- End of header -->
\t \t <div class="row">
\t \t \t <div class="col-md-2">
\t \t \t </div>
\t \t \t <div class="col-md-8">
\t \t \t \t <strong class="title">Professional Painters </strong> </br>
\t \t \t \t <strong class="subtitle">Tackling Residential & Commerical Painting Projects</strong> </br>
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida massa pharetra,
\t \t \t \t tempor ligula ut,aliquet nulla. Quisque eu quam turpis. Sed portitor mauris nec quam dignissim, et placerat odio scelerisque. In hac
\t \t \t \t habitussa platea dictumst. Proin et accumsan nunc, sit amet bibenndum parus. Proin at euismod ante.
\t \t \t \t \t Phasellus ipsum orcii feugiat tristique mollis vitae, sagittis sollicitudin libero.In lompus <br/>ex non ipsum prctium, ae
\t \t \t conseqaut justo fringilla. </p>
\t \t \t </div>
\t \t \t <div class="col-md-2">
\t \t \t </div>
\t \t </div>
\t \t <!--End of first part -->
\t \t <br/>
\t \t <div class="row">
\t \t \t <div class="col-md-2">
\t \t \t </div>
\t \t \t <div class="col-md-8">
\t \t \t \t <strong class="subtitle">Why Clients Choose To Hire Our Team: </strong> </br>
\t \t \t \t <p>
\t \t \t \t \t <label class="content"> <img src="images\\listicon.png"> Mauris sit amet urna etleo pulvinar tristique </label>
\t \t \t \t </p>
\t \t \t \t <p>
\t \t \t \t \t <label class="content"> <img src="images\\listicon.png"> Nameu eros mollis, interdum sapren tincidant accumsan erat. </label>
\t \t \t \t </p>
\t \t \t \t <p>
\t \t \t \t \t <label class="content"> <img src="images\\listicon.png"> Maecenas rutrum libero ac drum volutpat, eu veucula risas molestre </label>
\t \t \t \t </p>
\t \t \t \t <p>
\t \t \t \t \t <label class="content"> <img src="images\\listicon.png"> Mauris et tellus in lucas effucutar fringilla </label>
\t \t \t \t </p>
\t \t \t \t <p>
\t \t \t \t \t <label class="content"> <img src="images\\listicon.png"> Naliam lacinia nulla eget quam ornaz blandit</label>
\t \t \t \t </p>
\t \t \t \t <p>
\t \t \t \t \t <label class="content"> <img src="images\\listicon.png"> Sed mollis magna eu mi allquet scalerisque</label>
\t \t \t \t </p>
\t \t \t </div>
\t \t \t <div class="col-md-2">
\t \t \t </div>
\t \t </div>
\t \t <!-- End of 2nd part-->
\t \t <div class="row">
\t \t \t <div class="col-md-2">
\t \t \t </div>
\t \t \t <div class="col-md-8">
\t \t \t \t <p>
\t \t \t \t \t Donec allquem sit amet nisised consequent. Ttiam gravida nisi. Interdam et malesuada fames ac ante ipsum
\t \t \t \t \t primia in faucibus. Aeneam feugiat lacinia velit non lacinia. Proin eget tristique leo.
\t \t \t \t </p>
\t \t \t </div>
\t \t \t <div class="col-md-2">
\t \t \t </div>
\t \t </div>
\t \t <!-- end of 3rd part-->
\t \t <!-- footer navbar-->
\t \t <nav class="navbar navbar-inverse">
\t \t \t <div class="container-fluid">
\t \t \t \t <div class="navbar-header">
\t \t \t \t </div>
\t \t \t \t <ul class="nav navbar-nav">
\t \t \t \t \t <li>
\t \t \t \t \t \t <label>SCHEDULE YOUR FREE ESTIMATE!</label>
\t \t \t \t \t \t <label class="content1" style="
\t \t font-size: 25px; padding-left: 11px; padding-bottom: 0px; padding-top: 7px; margin-top: -19px;"> 555-123-4567</label>
\t \t \t \t \t </li>
\t \t \t \t </ul>
\t \t \t </div>
\t \t </nav>
\t \t <hr class="last">
\t </div>
\t
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
\t <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
\t \t <script src="validation.js">
\t </body>
</html>
を行うことができ**、それは空の文字列 '' '' !!!です – adeneo
エラーは何ですか？値は 'null 'にすることはできません。空の文字列をチェックする必要があります。 – Xufox
@adeneo誰かのフィールドを空にして、ボタンが動作しないときにエラーを表示しない – shiva