I'm trying to make some form validation. If you click the radio button, you can go to the next step, but if you don't click it, you can't proceed. Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Multi Step Registration Form Template</title>
<link rel="stylesheet" href="<?=base_url()?>assets/bootstrap/css/bootstrap.min.css">
<!-- CSS -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="<?=base_url()?>assets/multiplesteps/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="<?=base_url()?>assets/multiplesteps/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="<?=base_url()?>assets/multiplesteps/css/form-elements.css">
<link rel="stylesheet" href="<?=base_url()?>assets/multiplesteps/css/style.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicon and touch icons -->
<link rel="shortcut icon" href="<?=base_url()?>assets/multiplesteps/ico/favicon.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?=base_url()?>assets/multiplesteps/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?=base_url()?>assets/multiplesteps/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?=base_url()?>assets/multiplesteps/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="<?=base_url()?>assets/multiplesteps/ico/apple-touch-icon-57-precomposed.png">
</head>
<body background="<?=base_url()?>assets/multiplesteps/img/backgrounds/green.jpg">
<?php //$this->load->view($view) ?>
<!-- Top content -->
<div class="top-content">
<div class="inner-bg">
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 text">
<h1><strong>KUISIONER RAWAT JALAN</strong></h1>
<div class="description">
<p>
<b>RUMAH SAKIT UMUM DAERAH TEBET</b>
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3 form-box">
<form role="form" action="" method="post" class="registration-form">
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Langkah 1 / 3</h3>
<p>Keterangan Responden</p>
</div>
<div class="form-top-right">
<img src="<?=base_url()?>assets/multiplesteps/img/logorsudtebet.png">
<!--<i class="fa fa-user"></i>-->
</div>
</div>
<div class="form-bottom">
<div class="form-group col-md-12">
<label class="col-sm-6">Usia Responden</label>
<input class="form-control col-md-6" type="text" placeholder="Isi Usia Anda" name="usia">
</div>
<div class="form-group col-md-12">
<label class="col-md-6">Status Perkawinan</label>
<div class="col-md-12">
<input class="radio" type="radio" name="gender" value="male"> Belum Kawin
<input type="radio" name="gender" value="male"> Kawin
<input type="radio" name="gender" value="male"> Cerai Hidup
<input type="radio" name="gender" value="male"> Cerai Mati
</div>
</div>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Step 2 / 3</h3>
<p>Set up your account:</p>
</div>
<div class="form-top-right">
<i class="fa fa-key"></i>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label class="sr-only" for="form-email">Email</label>
<input type="text" name="form-email" placeholder="Email..." class="form-email form-control" id="form-email">
</div>
<div class="form-group">
<label class="sr-only" for="form-password">Password</label>
<input type="password" name="form-password" placeholder="Password..." class="form-password form-control" id="form-password">
</div>
<div class="form-group">
<label class="sr-only" for="form-repeat-password">Repeat password</label>
<input type="password" name="form-repeat-password" placeholder="Repeat password..."
class="form-repeat-password form-control" id="form-repeat-password">
</div>
<button type="button" class="btn btn-previous">Previous</button>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Step 3 / 3</h3>
<p>Social media profiles:</p>
</div>
<div class="form-top-right">
<i class="fa fa-twitter"></i>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label class="sr-only" for="form-facebook">Facebook</label>
<input type="text" name="form-facebook" placeholder="Facebook..." class="form-facebook form-control" id="form-facebook">
</div>
<div class="form-group">
<label class="sr-only" for="form-twitter">Twitter</label>
<input type="text" name="form-twitter" placeholder="Twitter..." class="form-twitter form-control" id="form-twitter">
</div>
<div class="form-group">
<label class="sr-only" for="form-google-plus">Google plus</label>
<input type="text" name="form-google-plus" placeholder="Google plus..." class="form-google-plus form-control" id="form-google-plus">
</div>
<button type="button" class="btn btn-previous">Previous</button>
<button type="submit" class="btn">Sign me up!</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Javascript -->
<script src="<?=base_url()?>assets/multiplesteps/js/jquery-1.11.1.min.js"></script>
<script src="<?=base_url()?>assets/multiplesteps/bootstrap/js/bootstrap.min.js"></script>
<script src="<?=base_url()?>assets/multiplesteps/js/jquery.backstretch.min.js"></script>
<script src="<?=base_url()?>assets/multiplesteps/js/retina-1.1.0.min.js"></script>
<script src="<?=base_url()?>assets/multiplesteps/js/scripts.js"></script>
</body>
</html>
Here's my jQuery code:
$('.registration-form fieldset:first-child').fadeIn('slow');
$('.registration-form input[type="text"], .registration-form input[type="password"], .registration-form textarea').on('focus', function() {
$(this).removeClass('input-error');
});
How can I achieve this functionality?
Related
I am trying to add jQuery datepicker function here. But I am getting an error like 'Datepicker is not a function'. please let me know what went wrong. I went through other questions and tried rectifying but didnot work.
<script>
$(function () {
var $j = jQuery.noConflict();
$j("#From").datepicker();
});
//$(function () {
// $('#datetimepicker2').datetimepicker({
// });
//});
</script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Reports</title>
<link href="~/Content/Site.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.12.4.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
</head>
<body>
<div class="container">
<!-- Form Starts-->
<form name="PTTReport" style="padding-top:20px">
<div class="panel panel-primary">
<div style="padding-bottom:25px" class="panel-heading fixed_panel">
<span>Report Filters</span>
</div>
<div class="panel-body">
<div class="row pb-20px">
<label id="From1" class="col-sm-1">From</label>
<input type="text" class="col-sm-2" id="From" />
<label id="To" class="col-sm-1">To</label>
<input type="text" class="col-sm-2" id="To" />
</div>
<div class="row">
<div class='col-sm-5'>
<div class="form-group">
<label id="From1" class="col-sm-2">From</label>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Entire cshtml page,
<!DOCTYPE html>
<script>
$(function () {
var $j = jQuery.noConflict();
$j("#From").datepicker();
});
//$(function () {
// $('#datetimepicker2').datetimepicker({
// });
//});
</script>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Reports</title>
<link href="~/Content/Site.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.12.4.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
</head>
<body>
<div class="container">
<!-- Form Starts-->
<form name="PTTReport" style="padding-top:20px">
<div class="panel panel-primary">
<div style="padding-bottom:25px" class="panel-heading
fixed_panel">
<span>Report Filters</span>
</div>
<div class="panel-body">
<div class="row pb-20px">
<label id="From1" class="col-sm-1">From</label>
<input type="text" class="col-sm-2" id="From" />
<label id="To" class="col-sm-1">To</label>
<input type="text" class="col-sm-2" id="To" />
</div>
<div class="row">
<div class='col-sm-5'>
<div class="form-group">
<label id="From1" class="col-sm-2">From</label>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Did you include datepicker JS file in the DOM? Can you update latest code?
check below snippet. its working
$(function () {
var $j = jQuery.noConflict();
$j(".datepicker").datepicker();
});
//$(function () {
// $('#datetimepicker2').datetimepicker({
// });
//});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Reports</title>
<link href="~/Content/Site.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<!-- Form Starts-->
<form name="PTTReport" style="padding-top:20px">
<div class="panel panel-primary">
<div style="padding-bottom:25px" class="panel-heading fixed_panel">
<span>Report Filters</span>
</div>
<div class="panel-body">
<div class="row pb-20px">
<label id="From1" class="col-sm-1">From</label>
<input type="text" class=" datepicker col-sm-2" id="From" />
<label id="To" class="col-sm-1">To</label>
<input type="text" class="datepicker col-sm-2" id="To" />
</div>
<div class="row">
<div class='col-sm-5'>
<div class="form-group">
<label id="From1" class="col-sm-2">From</label>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control datepicker" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Try this instead :
$(function() {
var j = jQuery.noConflict();
j("#From").datepicker();
});
I have two forms in the same page and one appears when clicking on the icon the login disappear and the signup appear. I am using spring mvc so I want when entering /register the function which toggle the forms work.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Login Form</title>
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}"
href="../static/css/reset.css"/>
<link rel='stylesheet prefetch'
href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900|RobotoDraft:400,100,300,500,700,900'/>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'/>
<!--<link rel="stylesheet" href="../static/css/style.css"/>-->
<link rel="stylesheet" th:href="#{/css/style.css}"
href="../static/css/style.css"/>
</head>
<body>
<!-- Mixins-->
<!-- Pen Title-->
<div class="container">
<div class="card"></div>
<div class="card">
<h1 class="title">Login</h1>
<form action="login" th:action="#{/login}" th:object="${login}" method="post" >
<div class="input-container">
<input type="email" id="email" th:field="*{email}" required="required"/>
<label for="email">email</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="password" id="Password" th:field="*{password}" required="required"/>
<label for="Password">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button type="submit" name="action" value="login"><span>Go</span></button>
</div>
<div class="footer">Forgot your password?</div>
</form>
</div>
<div class="card alt">
<div class="toggle"></div>
<h1 class="title">Register
<div class="close"></div>
</h1>
<form action="register" th:action="#{/register}" th:object="${register}" method="post">
<div class="input-container">
<input type="text" id="firstName" th:field="*{firstName}" required="required"/>
<label for="firstName">First Name</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="text" id="lastName" th:field="*{lastName}" required="required"/>
<label for="lastName">Last Name</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="email" id="email_" th:field="*{email}" required="required"/>
<label for="email">Email</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="password" id="Password_" th:field="*{password}" required="required"/>
<label for="Password">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button type="submit" name="action" value="register"><span>Next</span></button>
</div>
</form>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script th:src="#{/js/index.js}"></script>
</body>
</html>
JavaScript code :
$('.toggle').on('click', function() {
$('.container').stop().addClass('active');
});
$('.close').on('click', function() {
$('.container').stop().removeClass('active');
});
i want for example when entering /register it retrieve the register form instead of login
One way to do that is to create a /register controller that will return a parameter:
#RequestMapping("/register")
public ModelAndView register() {
ModelAndView mv = new ModelAndView("your_form_page")
mv.addObject("isRegister", true);
return mv;
}
Then you can add a hidden field and use it in the javascript to toggle the divs:
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:th="http://www.thymeleaf.org">
<head>
<!-- imports omitted -->
<script type="text/javascript">
$(document).ready(function () {
if ($("#isRegister").val()) {
$("#register").show();
$("#signUp").hide();
} else {
$("#register").hide();
$("#signUp").show();
}
});
</script>
</head>
<body>
<input id="isRegister" type="hidden" th:value="${isRegister}" disabled="disabled"/>
<div id="signUp">
Sign Up Form
</div>
<div id="register">
Register Form
</div>
</body>
</html>
Of course you can move the Javascript piece of code to your ".js" file. The important here is to have the hidden input field that will be accessible in the Javascript to toggle the DIVs.
I have a form , There's a button called "submit" (form3) where when it's clicked the stuff that was entered in the form should be sent to the database or something else . Although when I click "Submit" nothing happens :
===> see form :
<?php
header('Content-Type: text/html; charset=utf-8'); // it's use Firefox.... it's set UTF-8 character setting
?>
<!DOCTYPE html>
<!-- Author: Salhi Fadhel -->
<!--[if IE 8]><html class="ie8 no-js" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie9 no-js" lang="en"><![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- start: HEAD -->
<head>
<title>RefactorErl</title>
<!-- start: META -->
<meta charset="utf-8" />
<!--[if IE]><meta http-equiv='X-UA-Compatible' content="IE=edge,IE=9,IE=8,chrome=1" /><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="" name="description" />
<meta content="" name="author" />
<!-- end: META -->
<!-- start: MAIN CSS -->
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/style.css">
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/main-responsive.css">
<link rel="stylesheet" href="assets/plugins/iCheck/skins/all.css">
<link rel="stylesheet" href="assets/plugins/perfect-scrollbar/src/perfect-scrollbar.css">
<link rel="stylesheet" href="assets/css/theme_light.css" id="skin_color">
<!--[if IE 7]>
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome-ie7.min.css">
<![endif]-->
<!-- end: MAIN CSS -->
<!-- start: CSS REQUIRED FOR THIS PAGE ONLY -->
<!-- end: CSS REQUIRED FOR THIS PAGE ONLY -->
</head>
<!-- start: MAIN JAVASCRIPTS -->
<!--[if lt IE 9]>
<script src="assets/plugins/respond.min.js"></script>
<script src="assets/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="assets/plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/blockUI/jquery.blockUI.js"></script>
<script src="assets/plugins/iCheck/jquery.icheck.min.js"></script>
<script src="assets/plugins/perfect-scrollbar/src/jquery.mousewheel.js"></script>
<script src="assets/plugins/perfect-scrollbar/src/perfect-scrollbar.js"></script>
<script src="assets/js/main.js"></script>
<!-- end: MAIN JAVASCRIPTS -->
<!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script src="assets/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="assets/js/login.js"></script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script>
jQuery(document).ready(function() {
Main.init();
Login.init();
});
</script>
<!-- end: HEAD -->
<!-- start: BODY -->
<body class="login example2">
<div class="main-login col-sm-4 col-sm-offset-4">
<div class="logo" color="red">RefactorErl
</div>
<!-- start: LOGIN BOX -->
<div class="box-login">
<h3>Sign in to your account</h3>
<p>
Please enter your name and password to log in.
</p>
<form class="form-login" id="form1" method="post" action="">
<div class="errorHandler alert alert-danger no-display">
<i class="icon-remove-sign"></i> You have some form errors. Please check below.
</div>
<fieldset>
<div class="form-group">
<span class="input-icon">
<input type="text" class="form-control" name="username" placeholder="Username or Email">
<i class="icon-user"></i> </span>
</div>
<div class="form-group form-actions">
<span class="input-icon">
<input type="password" class="form-control password" name="password" placeholder="Password">
<i class="icon-lock"></i>
<a class="forgot" href="#">
I forgot my password
</a> </span>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-bricky pull-right" name="login" id="login">
Login <i class="icon-circle-arrow-right"></i>
</button>
</div>
<div class="new-account">
Don't have an account yet?
<a href="#" class="register">
Create an account
</a>
</div>
</fieldset>
</form>
</div>
<!-- end: LOGIN BOX -->
<!-- start: FORGOT BOX -->
<div class="box-forgot">
<h3>Forget Password?</h3>
<p>
Enter your e-mail address below to reset your password.
</p>
<form class="form-forgot" id="form2" method="post" action="">
<div class="errorHandler alert alert-danger no-display">
<i class="icon-remove-sign"></i> You have some form errors. Please check below.
</div>
<fieldset>
<div class="form-group">
<span class="input-icon">
<input type="email" class="form-control" name="email" placeholder="Email">
<i class="icon-envelope"></i> </span>
</div>
<div class="form-actions">
<button class="btn btn-light-grey go-back">
<i class="icon-circle-arrow-left"></i> Back
</button>
<button type="submit" class="btn btn-bricky pull-right">
Submit <i class="icon-circle-arrow-right"></i>
</button>
</div>
</fieldset>
</form>
</div>
<!-- end: FORGOT BOX -->
<!-- start: REGISTER BOX -->
<div class="box-register">
<h3>Sign Up</h3>
<p>
Enter your personal details below:
</p>
<form class="form-register" id="form3" method="post" >
<div class="errorHandler alert alert-danger no-display">
<i class="icon-remove-sign"></i> You have some form errors. Please check below.
</div>
<div class="successHandler alert alert-success no-display">
<i class="icon-ok"></i> Your form validation is successful!
</div>
<fieldset>
<div class="form-group">
<input type="text" class="form-control" name="full_name" id="full_name" placeholder="Full Name">
</div>
<div class="form-group">
<input type="text" class="form-control" name="address" id="address" placeholder="Address">
</div>
<div class="form-group">
<input type="text" class="form-control" name="city" id="city" placeholder="City">
</div>
<p>
Enter your account details below:
</p>
<div class="form-group">
<span class="input-icon">
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
<i class="icon-envelope"></i> </span>
</div>
<div class="form-group">
<span class="input-icon">
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
<i class="icon-lock"></i> </span>
</div>
<div class="form-group">
<span class="input-icon">
<input type="password" class="form-control" name="password_again" placeholder="Password Again">
<i class="icon-lock"></i> </span>
</div>
<div class="form-actions">
<button class="btn btn-light-grey go-back">
<i class="icon-circle-arrow-left"></i> Back
</button>
<button type="submit" class="btn btn-bricky pull-right" id="submit" >
Submit <i class="icon-circle-arrow-right"></i>
</button>
</div>
</fieldset>
</form>
</div>
<!-- end: REGISTER BOX -->
<!-- start: COPYRIGHT -->
<div class="copyright">
© <?php echo date("Y")?> ELTE IK</i>
</div>
<!-- end: COPYRIGHT -->
</div>
</body>
<!-- end: BODY -->
</html>
<?php
if (isset($_POST['submit']))
{
echo "<script>alert(\"Just a test .\");</script>";
}
?>
I added name='login' in each submit button of each <form></form>
<div class="form-actions">
<button type="submit" class="btn btn-bricky pull-right" name="login" id="login">
Login <i class="icon-circle-arrow-right"></i>
</button>
</div>
<button type="submit" class="btn btn-bricky pull-right" name='login'>
Submit <i class="icon-circle-arrow-right"></i>
</button>
<button type="submit" class="btn btn-bricky pull-right" id="submit" name='login' >
Submit <i class="icon-circle-arrow-right"></i>
</button>
And, it worked for me for all 3 forms.
Success Screenshot.
I submit form with only ONE invalid input, whole form becomes red?
If I change invalid input, it does not go green, but stay red.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/signin.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/jqBootstrapValidation.js"></script>
<script>
$(function() {$("input,textarea,select").jqBootstrapValidation();});
</script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="container">
<form class="form-signin" id="login" novalidate>
<h3 class="form-signin-heading">Sign up</h3>
<div class="control-group">
<label for="inputEmail" class="control-label">Email address</label>
<div class="controls">
<input type="email" id="inputEmail" class="form-control" required autofocus>
</div>
</div>
<div class="control-group">
<label for="inputPassword" class="control-label">Password</label>
<div class="controls">
<input type="password" id="inputPassword" class="form-control" required required data-validation-required-message="Password is empty">
</div>
</div>
<button name="login" class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
</form>
</div> <!-- /container -->
</body>
</html>
I am using bootstrap validation for validating jsp page .
my folder structure is as follow,
WebContent
├── bootstrap-form-validation
├── js
└── pages
Here all three folders are under web content. If i create one more folder called teacherDetails under pages folder for placing my jsp files. My problem is the validation is not working properly. but when I put that jsp file out of pages folder or under webcontent directly its working fine, for my project it has to be in pages folder . please help me in this and my jsp code is as follow
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!-- Optional theme -->
<link href="<%=request.getContextPath()%>/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="<%=request.getContextPath()%>/bootstrap-form-validation/style.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/bootstrap-datetimepicker-master/css/datetimepicker.css">
<script src="<%=request.getContextPath()%>/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-modal.js"></script>
<script src="<%=request.getContextPath()%>/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
</head>
<script type="text/javascript">
$(function() {
$('#datetimepicker4').datetimepicker({
pickTime : false
});
});
</script>
<script>
$(function () { $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); } );
</script>
<script>
function profileDetails() {
document.getElementById("profiledetails").submit();
}
function profileCancel() {
document.getElementById("profileDetails").reset();
}
</script>
<style>
.no-space [class *="span"] {
margin-left: 0 !important;
width: 25% !important;
//
This
is
for
4
elements
ONLY
in
the
row
}
</style>
<body>
<form class="well form-horizontal" id="create_teacher" method="post" action="">
<div style="height: 850px;">
<div style="width: 104%; margin-top: -20px;">
<fieldset>
<legend style="color: #333;"> Teacher Information</legend>
</div>
<br> <br>
<div style="margin-left: 140px">
<div class="form-group">
<label for="uln" class="control-label">Teacher Id:</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="text" class="form-control" name="teacherId"
id="teacherId">
</div>
</div>
</div>
<br>
<div class="form-group">
<label for="name" class="control-label">Name :</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="text" class="form-control" name="teacherName"
id="teacherName">
</div>
</div>
</div>
<br>
<div class="form-group">
<label for="gender" class="control-label">Gender:</label>
<div class="col-xs-8">
<div class="col-lg-8">
<select class="form-control" name="gender">
<option></option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
<br>
<div class="form-group">
<label for="dob" class="control-label">Date Of Birth(DOB) :</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="date" class="form-control" name="dob" id="date">
</div>
</div>
</div>
<br>
<div class="form-group">
<label for="dob" class="control-label">Date Of
Join:</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="date" class="form-control" name="doj" id="date">
</div>
</div>
</div>
<br>
<div class="form-group">
<label for="name" class="control-label">Education
:</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="text" class="form-control" name="teacherName"
id="education">
</div>
</div>
</div>
<br>
<div class="form-group">
<label for="name" class="control-label">Experience
:</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="text" class="form-control" name="teacherName"
id="experience">
</div>
</div>
</div>
<br>
<div class="form-group">
<label for="name" class="control-label">Prev Employee details :</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="text" class="form-control" name="teacherName"
id="prevdetails">
</div>
</div>
</div>
<br>
<div class="form-group">
<label class="control-label">Photo :</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="file" />
</div>
</div>
</div>
<br>
<div class="form-group">
<label for="name" class="control-label">Email Id:</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="email" class="form-control" name="teacherName"
id="email">
<p class="help-block"></p>
</div>
</div>
</div>
<br>
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<div style="margin-left: 150px">
<input type="submit" class="btn btn-primary" value="Submit"
onclick="profileDetails();" />
<input type="button" class="btn btn-primary" value="Cancel"
onclick="cancelProfile();" />
</div>
</div>
</div>
</div>
</fieldset>
</div>
</form>
<script src="<%=request.getContextPath()%>/bootstrap-form-validation/assets/js/jquery-1.7.1.min.js"></script>
<script src="<%=request.getContextPath()%>/bootstrap-form-validation/assets/js/jquery.validate.js"></script>
<script src="<%=request.getContextPath()%>/js/script.js"></script>
<script>
addEventListener('load', prettyPrint, false);
$(document).ready(function(){
$('pre').addClass('prettyprint linenums');
});
</script>
</body>
</html>
Your links are relative
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
these links will search for the mentioned folder in the same level.
so if you put your jsp's in some folder called teacherDetails under pages, it'll look for bootstrap folder inside pages folder.
so to point to folders outside the current level, you've to specify it as follows:
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
./ represents the current folder, ../ will represent the parent of current folder and so on..