I am trying to validate a form and display the validation result just under the text fields on submission of form as below.
But i am not able to validate the input field on submit , but i am able to validate onBlur, i tried both ways, see belo the codes for onSubmit and onBlur respectively.
My codes for this is:
formSumbit.html
<!DOCTYPE html>
<html lang="en" ng-app="testapp">
<head>
<meta charset="utf-8"/>
<title>BoilerPlate</title>
<link rel="stylesheet" type="text/css" href="/reset.css"></link>
<link rel="stylesheet" type="text/css" href="/lib/bootstrap/css/bootstrap.css"></link>
<script src="/lib/angular/angular.js" ></script>
<script src="/lib/angular/angular-route.js" ></script>
<script src="/jquery.min.js" ></script>
<script src="/lib/bootstrap/js/bootstrap.js" ></script>
<script>
var app=angular.module('testapp', ['ngRoute']);
app.controller('signupController', ['$scope', function($scope) {
$scope.submitted = false;
$scope.signupForm = function() {
console.log("hi");
if ($scope.signup_form.$valid) {
// Submit as normal
} else {
$scope.signup_form.submitted = true;
}
}
}]);
</script>
<style type="text/css">
.error{color:red}
</style>
</head>
<body>
<div>
<form name="signup_form" ng-submit="signupForm()" novalidate >
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" ng-model="testform.name" required class="form-control" id="name" placeholder="Name"/>
<div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$error.required && signup_form.submitted">
<small class="error">
Your name is required.
</small>
</div>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" name="email" ng-model="testform.email" class="form-control" id="email" placeholder="Enter email"/>
<div class="error" ng-show="signup_form.email.$dirty && signup_form.email.$invalid && signup_form.submitted">
<small class="error" ng-show="signup_form.email.$error.email">
Your email not valid
</small>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
But i am able to do the validation in on Blur event. see the code below which is working on onBlur.
<!DOCTYPE html>
<html lang="en" ng-app="testapp">
<head>
<meta charset="utf-8"/>
<title>BoilerPlate</title>
<link rel="stylesheet" type="text/css" href="/reset.css"></link>
<link rel="stylesheet" type="text/css" href="/lib/bootstrap/css/bootstrap.css"></link>
<script src="/lib/angular/angular.js" ></script>
<script src="/lib/angular/angular-route.js" ></script>
<script src="/jquery.min.js" ></script>
<script src="/lib/bootstrap/js/bootstrap.js" ></script>
<script>
var app=angular.module('testapp', ['ngRoute']);
app.controller('signupController', ['$scope', function($scope) {
}]);
</script>
<style type="text/css">
.error{color:red}
</style>
</head>
<body>
<div>
<form name="signup_form" novalidate >
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" ng-model="testform.name" required class="form-control" id="name" placeholder="Name"/>
<div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$error.required">
<small class="error">
Your name is required.
</small>
</div>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" name="email" ng-model="testform.email" class="form-control" id="email" placeholder="Enter email"/>
<div class="error" ng-show="signup_form.email.$dirty && signup_form.email.$invalid">
<small class="error" ng-show="signup_form.email.$error.email">
Your email not valid
</small>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
Try this:
Example
<form name="form" ng-app>
<div class="control-group" ng-class="{true: 'error'}[submitted && form.email.$invalid]">
<label class="control-label" for="email">Your email address</label>
<div class="controls">
<input type="email" name="email" ng-model="email" required />
<span class="help-inline" ng-show="submitted && form.email.$error.required">Required</span>
<span class="help-inline" ng-show="submitted && form.email.$error.email">Invalid email</span>
</div>
</div>
<button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button>
</form>
Try to set the controller on the container div
<div ng-controller="signupController">
Check this example
http://codepen.io/sevilayha/pen/xFcdI
Related
I am trying to create a validation for a simple form in html using javascript. The problem is occurring in the if statement. The if is getting true when any one condition is getting true even if I have placed && in the statement. I html along with the js is given below:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<br><br>
<div class="container">
<form onsubmit="return validation(this);">
<div class="form-row">
<div class="form-group col-md-6">
<label>Username</label>
<input type="text" class="form-control" id="username" placeholder="Username">
</div>
<div class="form-group col-md-6">
<label>City</label>
<input type="text" class="form-control" id="city" placeholder="City">
</div>
</div>
<div class="form-group">
<label>Country</label>
<input type="text" class="form-control" id="country" placeholder="Country">
</div>
<div class="form-group">
<label>Age</label>
<input type="text" class="form-control" id="age" placeholder="Age">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Email</label>
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script>
function validation(form)
{
username = document.getElementById('username').value
city = document.getElementById('city').value
country = document.getElementById('country').value
age = document.getElementById('age').value
email = document.getElementById('email').value
if(username == '' && city != 'Jaipur' && country != 'India' && age != '22' && email == '')
{
console.log('ERROR');
return false;
}
else
{alert('Submitted');}
}
</script>
</body>
</html>
I believe you are trying to check if all of the conditions in your statement is/are true. the best operator to use is the OR || operator. so it checks if each individual statement is true or false.
Below is your code with the fix.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<br><br>
<div class="container">
<form onsubmit="return validation(this);">
<div class="form-row">
<div class="form-group col-md-6">
<label>Username</label>
<input type="text" class="form-control" id="username" placeholder="Username">
</div>
<div class="form-group col-md-6">
<label>City</label>
<input type="text" class="form-control" id="city" placeholder="City">
</div>
</div>
<div class="form-group">
<label>Country</label>
<input type="text" class="form-control" id="country" placeholder="Country">
</div>
<div class="form-group">
<label>Age</label>
<input type="text" class="form-control" id="age" placeholder="Age">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Email</label>
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script>
function validation(form)
{
username = document.getElementById('username').value;
city = document.getElementById('city').value;
country = document.getElementById('country').value;
age = document.getElementById('age').value;
email = document.getElementById('email').value;
if(username === '' || city != 'Jaipur' || country != 'India' || age != '22' || email === '')
{
console.log('ERROR');
return false;
}
else
{alert('Submitted');}
}
</script>
</body>
</html>
Do let me know if this helps
JavaScript, jQuery Experts,
I have the following coding, It work perfect when i check it in JSFiddle, but it does not work when I insert it in a WordPress post, so what should I do?
JSFiddle example: https://jsfiddle.net/m1aaaqo9/11/
WordPrss page link: https://kahoothack.net/kahoot-flood/
Note: The login button does not work in WordPress post neither it accept password and username. It seems the JavaScript is not working there. So how to fix it?
Check my WordPress post and below see the login box why it is not working. Thanks
HTML Part
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Validation Form</title>
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Login Form</h1>
<span>Name:admin</span>
<span>password:123</span>
<div class="row">
<div class="col-md-4">
<form action="#" method="post" class="form-box" id="form">
<div class="form-group">
<label>Name:</label>
<input type="text" id="name" name="name" class="form-control" placeholder="Enter Name"/>
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" id="pass" name="pass" class="form-control" placeholder="Enter Password"/>
</div>
<div class="form-group">
<input type="submit" id="submit" name="pass" class="btn btn-md btn-info" value="Login"/>
<span id="Required" style="color:#ff0000;"></span>
</div>
<span id="error" style="color:#ff0000"></span>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</body>
</html>
JavaScript Part
$(document).ready(function(){
$("#submit").click(function(){
var name= $("#name").val();
var pass = $("#pass").val();
if(name == '' || pass == ''){
$("#Required").html('All Feild Are Required').css('color','red');
}else if(name == 'admin' && pass == '123'){
$("#form").html('<h4>User Login Successfully</h4>Back').css('color','green');
}else{
$("#error").html('User Are Not Valid');
}
});
});
CSS Part
h1{
font-size:25px;
margin:10px 0;
}
.form-box{
border:1px solid #d3d3d3;
padding:20px;
}
$(document).ready(function(){
$("#submit").click(function(){
var name= $("#name").val();
var pass = $("#pass").val();
if(name == '' || pass == ''){
$("#Required").html('All Feild Are Required').css('color','red');
}else if(name == 'admin' && pass == '123'){
$("#form").html('<h4>User Login Successfully</h4>Click').css('color','green');
}else{
$("#error").html('User Are Not Valid');
}
});
});
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Validation Form</title>
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Login Form</h1>
<span>Name:admin</span>
<span>password:123</span>
<div class="row">
<div class="col-md-4">
<form action="#" method="post" class="form-box" id="form">
<div class="form-group">
<label>Name:</label>
<input type="text" id="name" name="name" class="form-control" placeholder="Enter Name"/>
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" id="pass" name="pass" class="form-control" placeholder="Enter Password"/>
</div>
<div class="form-group">
<input type="submit" id="submit" name="pass" class="btn btn-md btn-info" value="Login"/>
<span id="Required" style="color:#ff0000;"></span>
</div>
<span id="error" style="color:#ff0000"></span>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</body>
</html>
When you want to handle form submission in JavaScript, bind to the submit event of the form, not the click event of the submit button. Further, you need to cancel the default form submission event like so:
$('#form').submit(function handler(event) {
event.preventDefault(); // Cancel default form submission
const data = new FormData(this); // JQuery binds `this` to the form DOMNode
console.log("process the form data", data);
});
Keep in mind that form submission does not require JS by default. You're sometimes better off just submitting to the server and letting it do its work.
Remove all HTML, CSS and JS/jQuery code from your post and put just the following code inside your post:
<div class="container lh-custom">
<h1>Login Form</h1>
<span>Name:admin</span>
<span>password:123</span>
<div class="row">
<div class="col-md-4">
<form action="#" method="post" class="form-box" id="form">
<div class="form-group">
<label>Name:</label>
<input type="text" id="name" name="name" class="form-control" placeholder="Enter Name"/>
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" id="pass" name="pass" class="form-control" placeholder="Enter Password"/>
</div>
<div class="form-group">
<input type="submit" id="submit" name="pass" class="btn btn-md btn-info" value="Login"/>
<span id="Required" style="color:#ff0000;"></span>
</div>
<span id="error" style="color:#ff0000"></span>
</form>
</div>
</div>
</div>
Save your post.
Then put following code in your current theme's (Aspire Pro) functions.php:
/* Add custom jQuery and CSS */
function lh_add_custom_js_css(){
?>
<script>
jQuery(document).ready(function($){
$("#submit").click(function(){
var name= $("#name").val();
var pass = $("#pass").val();
if(name == '' || pass == ''){
$("#Required").html("All Feild Are Required").css("color","red");
}else if(name == "admin" && pass == "123"){
$("#form").html('<h4>User Login Successfully</h4>Back').css('color','green');
}else{
$("#error").html("User Are Not Valid");
}
});
});
</script>
<style>
.lh-custom h1{
font-size:25px;
margin:10px 0;
}
.lh-custom .form-box{
border:1px solid #d3d3d3;
padding:20px;
}
</style>
<?php
}
add_action( 'wp_footer', 'lh_add_custom_js_css' );
Save functions.php file and check the page again.
Javascript Jquery Experts,
I need a little help here.
This is my code, when i click on login button without putting any value in user-name & password it show message "All fields are required" but instantly as showen this message it dissapear and display unexpected message like you see when click on login button.
Now what i want ? i want when it display "All fields are required" then this message should be stable not redirect to the other unexpected message.
check also in jsfiddle: https://jsfiddle.net/m1aaaqo9/14/
1: when you click on login button checking in jsfiddle it redirect to this message: {"error":"key missing: title"}
2: I also put the same coding in my page: https://testjsvascripts.blogspot.com/p/javascript-test.html
Now when you click on login on my given page, it will redirect to display this message "Method not allowed error 405" and also add # after .html in url which i dont want.
3: same when you click on run snippet here and click on login without putting any value in user-name & password fields it will show this message "The custom error module does not recognize this error."
So my question is that: i want to display only this message " All fields are required " thats is..there should be no further redirections....So how to fix it in my code. ?
jQuery(document).ready(function($){
$("#submit").click(function(){
var name= $("#name").val();
var pass = $("#pass").val();
if(name == '' || pass == ''){
$("#Required").html("All Fields Are Required").css("color","red");
}else if(name == "admin" && pass == "123"){
$("#form").html('<h4>User Login Successfully</h4>Back').css('color','green');
}else{
$("#error").html("User Are Not Valid");
}
});
});
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Validation Form</title>
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Login Form</h1>
<span>Name:admin</span>
<span>password:123</span>
<div class="row">
<div class="col-md-4">
<form action="#" method="post" class="form-box" id="form">
<div class="form-group">
<label>Name:</label>
<input type="text" id="name" name="name" class="form-control" placeholder="Enter Name"/>
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" id="pass" name="pass" class="form-control" placeholder="Enter Password"/>
</div>
<div class="form-group">
<input type="submit" id="submit" name="pass" class="btn btn-md btn-info" value="Login"/>
<span id="Required" style="color:#ff0000;"></span>
</div>
<span id="error" style="color:#ff0000"></span>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</body>
</html>
jQuery(document).ready(function($){
$("#submit").click(function(){
var name= $("#name").val();
var pass = $("#pass").val();
if(name == '' || pass == ''){
$("#Required").html("All Fields Are Required").css("color","red");
}else if(name == "admin" && pass == "123"){
$("#form").html('<h4>User Login Successfully</h4>Back').css('color','green');
}else{
$("#error").html("User Are Not Valid");
}
return false;
});
});
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Validation Form</title>
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Login Form</h1>
<span>Name:admin</span>
<span>password:123</span>
<div class="row">
<div class="col-md-4">
<form action="#" method="post" class="form-box" id="form">
<div class="form-group">
<label>Name:</label>
<input type="text" id="name" name="name" class="form-control" placeholder="Enter Name"/>
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" id="pass" name="pass" class="form-control" placeholder="Enter Password"/>
</div>
<div class="form-group">
<input type="submit" id="submit" name="pass" class="btn btn-md btn-info" value="Login"/>
<span id="Required" style="color:#ff0000;"></span>
</div>
<span id="error" style="color:#ff0000"></span>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</body>
</html>
jQuery(document).ready(function($){
$("#submit").click(function(){
var name= $("#name").val();
var pass = $("#pass").val();
if(name == '' || pass == ''){
$("#Required").html("All Fields Are Required").css("color","red");
}else if(name == "admin" && pass == "123"){
$("#form").html('<h4>User Login Successfully</h4>Back').css('color','green');
}else{
$("#error").html("User Are Not Valid");
}
});
});
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Validation Form</title>
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Login Form</h1>
<span>Name:admin</span>
<span>password:123</span>
<div class="row">
<div class="col-md-4">
<form action="#" method="post" class="form-box" id="form">
<div class="form-group">
<label>Name:</label>
<input type="text" id="name" name="name" class="form-control" placeholder="Enter Name"/>
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" id="pass" name="pass" class="form-control" placeholder="Enter Password"/>
</div>
<div class="form-group">
<input type="button" id="submit" name="pass" class="btn btn-md btn-info" value="Login"/>
<span id="Required" style="color:#ff0000;"></span>
</div>
<span id="error" style="color:#ff0000"></span>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</body>
</html>
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.
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
});
<!DOCTYPE html>
<html>
<head>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div class="container">
<div class="">
<h1>Enter Details</h1>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6 col-md-5 col-xs-12">
<form class="form-group" ng-controller="validateCtrl" ng-submit="validateCtrl.$valid" name="myForm" novalidate>
<p>
<input type="text" class="form-control" name="user" ng-model="user" placeholder="Name" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>
<p>
<input type="email" class="form-control" name="email" ng-model="email" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" placeholder="Email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="number" class="form-control" name="number" ng-pattern="/^[0-9]+$/" ng-maxlength="10" ng-model="number" placeholder="Phone Number" required>
<span style="color:red" ng-show="myForm.number.$dirty && myForm.number.$invalid">
<span ng-show="myForm.number.$error.required">Phone number is required.</span>
<span ng-show="myForm.number.$error.number">Invalid phone number.</span>
</span>
</p>
<p>
<input class="btn btn-primary" type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid || myForm.number.$dirty && myForm.number.$invalid">
</p>
</form>
</div>
</div>
</div>
</body>
</html>
Here is my code. When i am using older version js file then on submitting blank form error message will be shown. But When i am using newer version js file then on submitting blank form error message will not be shown.