Validation Are Not Working - javascript

When I run these code following Snippet in img Errors
Uncaught Error: [$injector:modulerr] Failed to instantiate module
homeApp due to: Error: [$injector:modulerr] Failed to instantiate
module ngStorage due to: Error: [$injector:nomod] Module 'ngStorage'
is not available! You either misspelled the module name or forgot to
load it. If registering a module ensure that you specify the
dependencies as the second argument.
Uncaught TypeError: Cannot read property 'push' of undefined.
Are raise And Validation is not Working...
var homeApp= angular.module("homeApp",['ngStorage']);
homeApp.controller("homeController",function($scop,$localStorage){
$scop.saveData=function(){
var leads = document.homeForm.leads.value;
var email = document.homeForm.email.value;
var phone = document.homeForm.phone.value;
var referance = document.homeForm.referance.value;
var nameref = document.homeForm.nameref.value;
var preftime = document.homeForm.preftime.value;
var myObj={"leads":leads , "email":email,
"phone":phone, "referance":referance,
"nameref":nameref, "preftime":preftime}
$localStorage.myObj=myObj;
}
});
homeApp.controller('AppController', [function() {
var self = this;
self.submit = function() {
console.log('Form is submitted with following user', self.user);
};
}]
);
.color {
color: red;
font-size:small;
}
input.ng-touched,select.ng-touched,input.ng-invalid{
border: 2px solid red;
}
input.ng-valid,select.ng-valid{
border: 1px solid #99ff33;
}
input.ng-untouched,select.ng-untouched,checkbox{
border: 1px transparent;
}
#left{
width: 50%;
float: left;
}
#right{
width: 50%;
float: right;
}
.header{
text-align: center;
font-size: 80px;
border: 1px solid black;
}
.bt{
float: left;
}
<html>
<head>
<title>Add Leads</title>
<link rel="stylesheet" href="css/bootstrap.css" >
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/validation.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="js/ngStorage-master/ngStorage.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"> </script>
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js'></script>
<script src="app.js"></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'></script>
<!--Mask Input For Contect Number-->
<script type="text/javascript">
jQuery(function($){
$("#phone").mask("9999-999-999");
});
</script>
<!--/Mask Input For Contect Number-->
<!--Insert In Locale Storage-->
<script type="text/javascript">
function check()
{
var leads = document.homeForm.leads.value;
var email = document.homeForm.email.value;
var phone = document.homeForm.phone.value;
var referance = document.homeForm.referance.value;
var nameref = document.homeForm.nameref.value;
var preftime = document.homeForm.preftime.value;
var data = [{"leads":leads , "email":email,
"phone":phone, "referance":referance,
"nameref":nameref, "preftime":preftime}];
var store= JSON.stringify(data);
var d = localStorage.setItem('Leads',store);
}
</script>
<!--/Insert In Locale Storage-->
</head>
<body ng-app="homeApp" ng-controller="homeController" >
<div class="container">
<div class="header">Add Leads</div>
<br><br>
<form class="form-group" name="homeForm">
<div >
<!-- left Panel-->
<div id="left" class="container">
<label>Leads Name</label>
<input type="text"
id="leads"
class="form-control"
name="leads"
ng-model="leads"
tabindex="1"
placeholder="Enter Lead Name"
required
/>
<span ng-show="homeForm.leads.$touched && homeForm.leads.$error.required"><div class="color">Enter Name</div></span>
<!--<span ng-show="homeForm.leads.$error.required"><div class="color">Lead Name is Required!!!</div></span>--><br>
<label>Contect No</label>
<input type="text"
id=""
class="form-control"
name="phone"
ng-model="phone"
placeholder="Enter Phone Number"
ng-minlength="10"
mask="####-###-###"
ng-maxlength="12"
tabindex="3"
required
/>
<span ng-show="homeForm.phone.$touched && homeForm.phone.$error.required"><div class="color">Enter Contect Number</div></span>
<br>
<div class="checkbox">
<label>
<input type="checkbox"
ng-model="maycontect"
name="maycontect"
id="maycontect"
value=""
tabindex="6">May Contet</label>
</div>
<div class="radio" ng-show="maycontect">
<label class="container"><b>Preffered Time:</b>
<div>
<span >
<input type="radio" name="preftime" ng-model="preftime"> Morning
<input type="radio" name="preftime" ng-model="preftime"> Afternoon
<input type="radio" name="preftime" ng-model="preftime"> Evening
</span>
</div>
</label>
</div>
</div>
<!-- Right Panel-->
<div id="right" class="container">
<label>Email Id:</label>
<input type="email"
name="email"
class="form-control"
ng-model="email"
Placeholder="Enter Email Id"
tabindex="2"
required>
<span ng-show="homeForm.email.$touched && homeForm.email.$error.required"><div class="color">Enter Email Id</div></span><br>
<div ng-switch="referance">
<label>Referance</label>
<select ng-model="referance"
name="referance"
class="form-control"
onChange="changeTextBox()"
id="referance"
tabindex="4"
required >
<option value="byReferance" >By Referance</option>
<option value="newsPaper" >News Paper</option>
<option value="email">Email</option>
<option value="socialMedia" >Social Media</option>
</select>
<span ng-show="homeForm.referance.$touched && homeForm.referance.$error.required">
<div class="color">Select Referance.</div>
</span>
<br>
<div ng-switch-when="byReferance">
<label>Referance Name</label>
<input type="text"
name="nameref"
id="nameref"
class="form-control"
ng-model="nameref"
Placeholder="Enter Name Of Referance"
tabindex="5"
required
>
<span ng-show="homeForm.nameref.$touched && homeForm.nameref.$error.required">
<div class="color">Enter Referance Name.</div>
</span>
<br>
</div>
</div>
</div>
</div>
<div >
<input onClick="return check()" type="submit" class="btn btn-success" value="Submit" ng-disabled="homeForm.$invalid">
<input type="reset" class="btn btn-default" value="Reset">
</div>
</form>
</div>
</body>
</html>


load ngStorage.js after angular.js and not before
<script src="js/ngStorage-master/ngStorage.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js">
change this to
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js">
<script src="js/ngStorage-master/ngStorage.js"></script>
also you have multiple instances of jquery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
remove that... same with angular, remove multiple versions of angular as well

Related

jquery-ui.js:8056 Uncaught TypeError: Cannot read property 'left' of undefined

I have no clue why my sign up page have these errors
jquery-ui.js:8056 Uncaught TypeError: Cannot read property 'left' of undefined
Some codes
<input type="text" name="datePickerInput" class="form-control hidden" id="datePickerInput" value="" placeholder="">
<script type="text/javascript">
$("#babyDob").click(function() {
$('#datePickerInput').datepicker('show');
$("#datePickerInput").datepicker({
dateFormat: 'yy-mm-dd',
maxDate: 0,
onSelect: function() {
var dateSelected = $(this).datepicker('getDate');
// dateSelected = moment(dateSelected).format('YYYY-MM-DD');
console.log("dateSelected",dateSelected);
}
});
});
</script>
Entire Codes
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Bunlong Heng">
<meta name="csrf-token" value="{{ csrf_token() }}">
<title>Sign Up</title>
<link id="favicon" rel="shortcut icon" href="/assets/fe/img/favicon/local/favicon-prod.png" type="image/x-icon" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
#include('layouts.be.baby.styles.datePicker')
<style type="text/css">
.form {
margin-top: 200px;
color: black;
z-index: 2;
}
.btn, .form-control {
border-radius: 0px;
border: solid 1px black;
color: black;
}
.sign-up-section {
font-weight: thin !important;
}
body{
overflow: hidden;
}
</style>
</head>
<body>
<div class="container ">
<div class="row ">
<p style="font-size: 1500px; color: black; z-index: 1; position: absolute; top: 0; right: 0; ">MY</p>
<div class="col-sm-4 "></div>
<div class="col-sm-4 form text-center">
<img src="https://i.imgur.com/XCVhEh4.png">
{!! Form::open(array('class' => 'form-horizontal', 'role' =>'form', 'url'=>'baby/store','files' => true)) !!}
{{-- Name --}}
<div class="form-group">
<label for="name" class="col-sm-4 control-label">Name</label>
<div class="col-sm-8">
<input type="text" value="{{Request::old('name')}}" value="" name="name" class="form-control" id="name" placeholder="Name">
</div>
</div>
{{-- Email --}}
<div class="form-group">
<label for="email" class="col-sm-4 control-label">Email</label>
<div class="col-sm-8">
<input name="email" type="email" value="" class="form-control" placeholder="Email">
</div>
</div>
{{-- babyName --}}
<div class="form-group">
<label for="babyName" class="col-sm-4 control-label">babyName</label>
<div class="col-sm-8">
<input type="text" value="{{Request::old('babyName')}}" value="" name="babyName" class="form-control" id="babyName" placeholder="babyName">
</div>
</div>
{{-- babyDob --}}
<div class="form-group">
<label for="babyDob" class="col-sm-4 control-label">babyDob</label>
<div class="col-sm-8">
<input type="text" value="{{Request::old('babyDob')}}" value="" name="babyDob" class="form-control" id="babyDob" placeholder="babyDob">
<input type="text" name="datePickerInput" class="form-control hidden" id="datePickerInput" value="" placeholder="">
</div>
</div>
{{-- adminCode --}}
<div class="form-group">
<label for="adminCode" class="col-sm-4 control-label">Password</label>
<div class="col-sm-8">
<input type="text" value="{{Request::old('adminCode')}}" value="" name="adminCode" class="form-control" id="adminCode" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-10">
<a class="btn btn-default" href="/baby/signup"> Cancel </a>
<button type="submit" id="submit" class="btn btn-default">Next</button>
</div>
</div>
{!!Form::close()!!}
</div>
</div>
</div>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$("#babyDob").click(function() {
$('#datePickerInput').datepicker('show');
$("#datePickerInput").datepicker({
dateFormat: 'yy-mm-dd',
maxDate: 0,
onSelect: function() {
var dateSelected = $(this).datepicker('getDate');
// dateSelected = moment(dateSelected).format('YYYY-MM-DD');
console.log("dateSelected",dateSelected);
}
});
});
</script>
</body>
</html>

Consider the following example.
$(function() {
$('#datePickerInput').datepicker('show');
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" name="datePickerInput" class="form-control hidden" id="datePickerInput" value="" placeholder="">
This throws a similar error:
Uncaught TypeError: inst is undefined
You must initialize the Datepicker first, and then call the show option. Like so:
$(function() {
$("#datePickerInput").datepicker({
dateFormat: 'yy-mm-dd',
maxDate: 0,
onSelect: function() {
var dateSelected = $(this).datepicker('getDate');
console.log("dateSelected", dateSelected);
}
});
$('#datePickerInput').datepicker('show');
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" name="datePickerInput" class="form-control hidden" id="datePickerInput" value="" placeholder="">

JQuery form validition code and preventdefault aren't not working

I have created a bootstrap signup form and the following jQuery code is not working. Despite the e.preventDefault() , the form is still being submitted, and the div containing the error message does not appear either.
Also, I have a login form with pretty much the exact same code and that one is working properly
$(function(){
$("#signup-form").on("submit",function(e){
var email=$("#emal");
var name=$("#username");
var ps=$("#password");
var psr=$("#passwordrepeat");
var error=$("#errormessage");
var errorcontainer=$("#errordiv");
if(name.val()=="" && ps.val()=="" && email.val()=="" && psr.val()==""){
error.text("Fields are empty!");
errorcontainer.removeClass("d-none");
errorcontainer.addClass("errorbg");
name.addClass("error");
ps.addClass("error");
email.addClass("error");
psr.addClass("error");
e.preventDefault();
}
});
});
body{
background:#9ec3ff !important;
}
.container{
background:#9ec3ff;
}
.col-lg-6{
margin:auto;
}
#facebook{
background:#568ac2 !important;
border:none;
border-radius:2px !important;
}
#twitter{
background:#6aabdb;
border:none;
border-radius:2px !important;
}
#google{
background:#cb3d2f;
border:none;
border-radius:2px !important;
}
#signupform{
box-shadow:0px 0px 10px #2e51a2;
}
#signupform:hover{
box-shadow:0px 0px 50px #2e51a2;
transition:0.5s;
}
.error{
box-shadow:0px 0px 10px #cb3d2f;
}
.errorbg{
border:2px solid red;
background:#fae3e3;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript" src="signup.js"></script>
<script type="text/javascript" src="jquery.sticky.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.6.3/css/all.css' integrity='sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/' crossorigin='anonymous'>
<link rel="stylesheet" type="text/css" href="signup.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>
<div class="container">
<div id="errordiv" class="m-auto text-danger font-weight-bold text-center col-lg-6 col-md-8 d-none">
<span id="errormessage"></span>
</div>
<div class="row mt-5">
<div id="signupform" class="col-lg-6 col-md-8 border border-primary text-center">
<span class="m-auto"><strong>Sign Up with</strong></span><br><br>
<div class="m-auto col-xl-10 col-lg-11 col-md-11 col-sm-10">
<button type="button" id="facebook" class="btn btn-primary float-left"><img class="mr-3" src="https://i.imgur.com/9FWWsfx.png"/>Facebook</button>
<button type="button" id="twitter" class="btn btn-primary float-center"><img class="mr-3" src="https://i.imgur.com/LXFDLev.png"/>Twitter</button>
<button type="button" id="google" class="btn btn-primary float-right"><img class="mr-3" src="https://i.imgur.com/AN3CMg9.png"/>Google+</button>
</div>
<br>
<span class="m-auto">Or</span><br>
<br>
<form id="signup-form">
<fieldset class="form-group">
<label for="formGroupExampleInput"><strong>E-mail</strong></label>
<input type="text" class="form-control w-75 m-auto" id="email" placeholder="Enter email" name="signup-email">
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleInput2">Username</label>
<input type="text" class="form-control w-75 m-auto" id="username" placeholder="Choose username" name="signup-username">
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleInput2">Password</label>
<input type="password" class="form-control w-75 m-auto" id="password" placeholder="Enter password" name="signup-password">
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleInput2">Password again</label>
<input type="password" class="form-control w-75 m-auto" id="passwordrepeat" placeholder="Enter password" name="signup-passwordrepeat">
</fieldset>
<div class="checkbox">
<label>
<input type="checkbox"> I have read and agree to the Term of Service and Privacy Policy
</label>
</div>
<input type="submit" name="signup" class="btn btn-primary mb-3" value="Create Account"/>
</form>
</div>
</div>
</div>
</body>
</html>

Use the preventdefault on top of the function.
There are a set of functions which are run in the background when submit is called. In Javascript when a function starts running there is no way it could stop. It only stops when it throws an error or if it returns a value. Using preventdefalut at the last doesn't help because it is too late and the submit function has began to run. When placed at the top of the function it explicitly says that the default submit functions aren't to be run.
$(function(){
$("#signup-form").on("submit",function(e){
e.preventDefault();
var email=$("#emal");
var name=$("#username");
var ps=$("#password");
var psr=$("#passwordrepeat");
var error=$("#errormessage");
var errorcontainer=$("#errordiv");
if(name.val()=="" && ps.val()=="" && email.val()=="" && psr.val()==""){
error.text("Fields are empty!");
errorcontainer.removeClass("d-none");
errorcontainer.addClass("errorbg");
name.addClass("error");
ps.addClass("error");
email.addClass("error");
psr.addClass("error");
}
});
});
body{
background:#9ec3ff !important;
}
.container{
background:#9ec3ff;
}
.col-lg-6{
margin:auto;
}
#facebook{
background:#568ac2 !important;
border:none;
border-radius:2px !important;
}
#twitter{
background:#6aabdb;
border:none;
border-radius:2px !important;
}
#google{
background:#cb3d2f;
border:none;
border-radius:2px !important;
}
#signupform{
box-shadow:0px 0px 10px #2e51a2;
}
#signupform:hover{
box-shadow:0px 0px 50px #2e51a2;
transition:0.5s;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript" src="signup.js"></script>
<script type="text/javascript" src="jquery.sticky.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.6.3/css/all.css' integrity='sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/' crossorigin='anonymous'>
<link rel="stylesheet" type="text/css" href="signup.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>
<div class="container">
<div id="errordiv" class="m-auto text-danger font-weight-bold text-center col-lg-6 col-md-8 d-none">
<span id="errormessage"></span>
</div>
<div class="row mt-5">
<div id="signupform" class="col-lg-6 col-md-8 border border-primary text-center">
<span class="m-auto"><strong>Sign Up with</strong></span><br><br>
<div class="m-auto col-xl-10 col-lg-11 col-md-11 col-sm-10">
<button type="button" id="facebook" class="btn btn-primary float-left"><img class="mr-3" src="https://i.imgur.com/9FWWsfx.png"/>Facebook</button>
<button type="button" id="twitter" class="btn btn-primary float-center"><img class="mr-3" src="https://i.imgur.com/LXFDLev.png"/>Twitter</button>
<button type="button" id="google" class="btn btn-primary float-right"><img class="mr-3" src="https://i.imgur.com/AN3CMg9.png"/>Google+</button>
</div>
<br>
<span class="m-auto">Or</span><br>
<br>
<form id="signup-form">
<fieldset class="form-group">
<label for="formGroupExampleInput"><strong>E-mail</strong></label>
<input type="text" class="form-control w-75 m-auto" id="email" placeholder="Enter email" name="signup-email">
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleInput2">Username</label>
<input type="text" class="form-control w-75 m-auto" id="username" placeholder="Choose username" name="signup-username">
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleInput2">Password</label>
<input type="password" class="form-control w-75 m-auto" id="password" placeholder="Enter password" name="signup-password">
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleInput2">Password again</label>
<input type="password" class="form-control w-75 m-auto" id="passwordrepeat" placeholder="Enter password" name="signup-passwordrepeat">
</fieldset>
<div class="checkbox">
<label>
<input type="checkbox"> I have read and agree to the Term of Service and Privacy Policy
</label>
</div>
<input type="submit" name="signup" class="btn btn-primary mb-3" value="Create Account"/>
</form>
</div>
</div>
</div>
</body>
</html>

Simply use return false; when validation fails (and preventDefault as well)
like following:
$(function(){
$("#signup-form").on("submit",function(e){
var email=$("#emal");
var name=$("#username");
var ps=$("#password");
var psr=$("#passwordrepeat");
var error=$("#errormessage");
var errorcontainer=$("#errordiv");
if(name.val()=="" && ps.val()=="" && email.val()=="" && psr.val()==""){
error.text("Fields are empty!");
errorcontainer.removeClass("d-none");
errorcontainer.addClass("errorbg");
name.addClass("error");
ps.addClass("error");
email.addClass("error");
psr.addClass("error");
e.preventDefault();
return false; // return false here to disallow from for submitting
}
});
});

How can I make the check sign appear after the input element in the same line?

I wrote a simple sign up webpage, and want to confirm password and check email address format, and show a check or cross sign after the input elements in the same line.
Before I added Bootstrap to my html file, the check or cross sign appear after the input elements in the same line. But after I added Bootstrap to my html file (especially after adding class="form-control"), the check or cross signs appear in the next line instead.
I wonder how to solve my problem? Thanks.
Here is my html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Registration</title>
<style>
html, body{
height: 100%;
width: 100%;
/* border: 1px solid black; */
background: linear-gradient(to top, #f2f6fb, #b3cae3);
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript" src="../js/register.js" defer></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-offset-5">
<form class="form-horizontal" action="RegisterProcess" method="post">
<div class="form-group">
<div class="col-lg-5">
<input type="password" class="form-control" name="password" id="password" placeholder="Password" style="border-color: grey; background-color: white">
<span width="5" name="passwordResult" id="passwordResult"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-5">
<input type="password" class="form-control" name="passwordConfirm" id="passwordConfirm" placeholder="Confirm Password" style="border-color: grey; background-color\
: white">
<span width="5" name="passwordConfirmResult" id="passwordConfirmResult"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-5">
<input type="email" class="form-control" name="email" id="email" placeholder="Email" style="border-color: grey; background-color: white">
<span width="5" name="emailResult" id="emailResult"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-3 col-lg-5">
<input type="submit" id="register" name="register" value="Sign Up">
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Here is my javascript
function arePasswordsSame() {
input = this; // document.getElementById("passwordConfirm");
if (input.value != document.getElementById("password").value) {
input.setCustomValidity("Password Must be Matching.");
document.getElementById("passwordConfirmResult").innerHTML = "×";
} else {
input.setCustomValidity("");
document.getElementById("passwordConfirmResult").innerHTML = "✔";
}
}
document.getElementById("passwordConfirm").addEventListener("change",arePasswordsSame);
function validateEmail(){
input = this; // document.getElementById("email");
var mailformat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(! input.value.match(mailformat)){
input.setCustomValidity("Email is invalid.");
document.getElementById("emailResult").innerHTML = "×";
}else{
input.setCustomValidity("");
document.getElementById("emailResult").innerHTML = "✔";
}
}
document.getElementById("email").addEventListener("change",validateEmail);

You can use the built in input-group-addon that ships with bootstrap
<div class="input-group">
<div class="col-lg-5">
<input type="password" class="form-control" name="password" id="password" placeholder="Password" style="border-color: grey; background-color: white">
<span width="5" class="input-group-addon" name="passwordResult" id="passwordResult"></span>
</div>
</div>
https://getbootstrap.com/docs/4.0/components/input-group/
EDIT
This should be the markup;
<div class="form-group">
<div class="col-lg-5">
<div class="input-group">
<input type="password" class="form-control" name="password" id="password" placeholder="Password" style="border-color: grey; background-color: white">
<span class="input-group-addon" name="passwordResult" id="passwordResult"> </span>
</div>
</div>
</div>

In Bootstrap, the form-control class causes the inputs to be display:block; at 100% width. You will have to override the default styling to prevent this(note that you can remove the !important rule as long as you add this CSS after Bootstrap is loaded):
function arePasswordsSame() {
input = this; // document.getElementById("passwordConfirm");
if (input.value != document.getElementById("password").value) {
input.setCustomValidity("Password Must be Matching.");
document.getElementById("passwordConfirmResult").innerHTML = "×";
} else {
input.setCustomValidity("");
document.getElementById("passwordConfirmResult").innerHTML = "✔";
}
}
document.getElementById("passwordConfirm").addEventListener("change",arePasswordsSame);
function validateEmail(){
input = this; // document.getElementById("email");
var mailformat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(! input.value.match(mailformat)){
input.setCustomValidity("Email is invalid.");
document.getElementById("emailResult").innerHTML = "×";
}else{
input.setCustomValidity("");
document.getElementById("emailResult").innerHTML = "✔";
}
}
document.getElementById("email").addEventListener("change",validateEmail);
.form-control {
display:inline-block!important;
width:95%!important;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Registration</title>
<style>
html, body{
height: 100%;
width: 100%;
/* border: 1px solid black; */
background: linear-gradient(to top, #f2f6fb, #b3cae3);
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript" src="../js/register.js" defer></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-offset-5">
<form class="form-horizontal" action="RegisterProcess" method="post">
<div class="form-group">
<div class="col-lg-5">
<input type="password" class="form-control" name="password" id="password" placeholder="Password" style="border-color: grey; background-color: white">
<span width="5" name="passwordResult" id="passwordResult"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-5">
<input type="password" class="form-control" name="passwordConfirm" id="passwordConfirm" placeholder="Confirm Password" style="border-color: grey; background-color\
: white">
<span width="5" name="passwordConfirmResult" id="passwordConfirmResult"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-5">
<input type="email" class="form-control" name="email" id="email" placeholder="Email" style="border-color: grey; background-color: white">
<span width="5" name="emailResult" id="emailResult"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-3 col-lg-5">
<input type="submit" id="register" name="register" value="Sign Up">
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>

How to change the font color of both label and input onfocus of an inputbox and change it back on blur

I have attached a plunker link for what ive did
http://plnkr.co/edit/JlARpFiVEFryAhgxgWJm?p=preview
input[attribute=flag]:focus {
color: red;
}
input[attribute=flag]{
color: green;
}
<form name="Form" class="form-horizontal " style="padding-left:9%;">
<div class="form-group">
<div class="col-sm-11 ">
<label for="inputEmail" class="control-label" >Email</label><br>
<input type="email" attribute=flag class="form-control inputBorderStyle box" id="usernameLogin" name="username" required="">
</div>
</div>
<div class="form-group">
<div class="col-sm-11 "><br>
<label for="inputPassword" class="control-label">Password</label><br>
<input type="password" attribute=flag class="form-control inputBorderStyle box" id="usernamePassword" name="password" required="">
</div>
</div>
<div class="form-group last">
<div class="col-sm-11"><br>
<button type="submit" id="loginButton" class="btn btn-myprimary">LOG IN</button>
</div>
</div>
</form>
Onfocus of input i want to change the color of both label and input.
Right now im able to chnage the color of input but how to change label color onfocus and change it back to other color on blur.If anyone has idea please suggest.
Thanks in advance

Try with focusin and focusout effect.
Jsfiddle
$(document).ready(function() {
$("input").on("focusin", function() {
$(this).siblings("label").css("color","red");
$(this).css("color","red");
});
$("input").on("focusout", function() {
$(this).siblings("label").css("color","green");
$(this).css("color","green");
})
})

Try this code:
$(function(){
$('input[type=email], input[type=password]').focus(function(){
$(this).closest('div').find('label').css({color:'red'})
});
$('input[type=email], input[type=password]').blur(function(){
$(this).closest('div').find('label').css({color:'#000'})
});
});
/* Styles go here */
.inputBorderStyle{
border:0;
box-shadow:none !important;
border-bottom:1px solid black;
border-radius:0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
input[attribute=flag]:focus {
color: red;
}
input[attribute=flag]{
color: green;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src="script.js"></script>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form name="Form" class="form-horizontal " style="padding-left:9%;">
<div class="form-group">
<div class="col-sm-11 ">
<label for="inputEmail" class="control-label" >Email</label><br>
<input type="email" attribute=flag class="form-control inputBorderStyle box" id="usernameLogin" name="username" required="">
</div>
</div>
<div class="form-group">
<div class="col-sm-11 "><br>
<label for="inputPassword" class="control-label">Password</label><br>
<input type="password" attribute=flag class="form-control inputBorderStyle box" id="usernamePassword" name="password" required="">
</div>
</div>
<div class="form-group last">
<div class="col-sm-11"><br>
<button type="submit" id="loginButton" class="btn btn-myprimary">LOG IN</button>
</div>
</div>
</form>
</body>
</html>
</body>
</html>
The focus and blurevents allow you to bind corresponding events when an HTML element receives focus and is out of focus.

You can add onfocus and onblur event on the inputs (without jQuery)
var userField = document.getElementById("usernameLogin");
userField.addEventListener("focus",function(){
this.parent.getElementsByTagName("label")[0].style.color = 'red';
});
userField.addEventListener("blur",function(){
this.parent.getElementsByTagName("label")[0].style.color = 'green';
});

Use jquery, to attach event focus to the input and the label after that add class to input and to the the label and detach the class on blur
$("input").on("focus",function(){
$(this).addClass("focusclass")
$(this).closest(".col-md-11").first().addClass("Labelfocusclass")
}
$("input").on("blur",function(){
$(this).removeClass("focusclass")
$(this).closest(".col-md-11").first().removeClass("Labelfocusclass")
}

JavaScript Solution:
Use onfocus and onblur events like this:
function changeColor(obj) {
document.getElementById(obj).style.color = "red";
}
function removeColor(obj) {
document.getElementById(obj).style.color = "black";
}
/* Styles go here */
.inputBorderStyle {
border: 0;
box-shadow: none !important;
border-bottom: 1px solid black;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
input[attribute=flag]:focus {
color: red;
}
input[attribute=flag] {
color: green;
}
<form name="Form" class="form-horizontal " style="padding-left:9%;">
<div class="form-group">
<div class="col-sm-11 "><br>
<label for="inputEmail" class="control-label" id="email">Email</label><br>
<input type="email" attribute=flag class="form-control inputBorderStyle box" id="usernameLogin" name="username" required="" onfocus="changeColor('email')" onblur="removeColor('email')">
</div>
</div>
<div class="form-group">
<div class="col-sm-11 "><br>
<label for="inputPassword" class="control-label" id="password">Password</label><br>
<input type="password" attribute=flag class="form-control inputBorderStyle box" id="usernamePassword" name="password" required="" onfocus="changeColor('password')" onblur="removeColor('password')">
</div>
</div>
<div class="form-group last">
<div class="col-sm-11"><br>
<button type="submit" id="loginButton" class="btn btn-myprimary">LOG IN</button>
</div>
</div>
</form>

check my fiddle mate and let me know i have done this using jquery
https://jsfiddle.net/estvwpvz/5/
var divs = document.getElementsByClassName('inputBorderStyle');
for(var i = 0; i < divs.length; i++)
{
document.getElementsByClassName('inputBorderStyle')[i].addEventListener("focusin", myFunction);
document.getElementsByClassName('inputBorderStyle')[i].addEventListener("focusout", myFunctionout);
}
function myFunction() {
this.style.color= "red";
this.parentElement.getElementsByTagName("label")[0].style.color = 'red';
}
function myFunctionout() {
this.style.color= "white";
this.parentElement.getElementsByTagName("label")[0].style.color = 'black';
}

Bootstrap dropdown not appearing in the middle of the screen

I have a few form fields, datepickers and a dropdown on my sample html page. On clicking the dropdown menu, it appears to the left of the screen, instead of appearing in the center, as all the other contents are. How to get it in the center of the page?
Html 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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Form</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<link href="./datepicker.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<center><form>
<div class="input-append date" data-date-format="dd-mm-yyyy" >
<label for="dp1">Starting Date</label> <br>
<input id="dp1" size="16" type="text" value="dd/mm/yyyy"/>
<span class="add-on"><i class="glyphicon glyphicon-calender" id="cal1"></i></span>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Number of students :
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div><br><br><br><br><br>
<div class="form-group">
<label for="inputName">Name of the student</label>
<input type="text" class="form-control" id="inputName" placeholder="">
</div>
<div class="form-group">
<label for="inputFname">Father's Name</label>
<input type="text" class="form-control" id="inputFname" placeholder="">
</div>
<div class="input-append date" data-date="" data-date-format="dd-mm-yyyy">
<label for="dp2">Date of Birth</label> <br>
<input id="dp2" size="16" type="text" value="dd/mm/yyyy"/>
<span class="add-on"><span class="glyphicon glyphicon-calender" id="cal2"></span></span>
</div>
<div class="form-group">
<label for="inputAddress">Address of the student</label>
<textarea type ="text" class = "form-control" id = "inputAddress" rows = "8" placeholder = "" ></textarea>
<span id="addressSpan"></span>
</div>
<div class="form-group">
<label for="inputObjects">hobbies</label>
<textarea type ="text" class = "form-control" id = "inputObjects" rows = "8" placeholder = "" ></textarea>
<span id="objectsSpan"></span>
</div>
<div class="form-group">
<label for="inputschoolName">Name of the school</label>
<input type="text" class="form-control" id="inputschoolName" placeholder="">
</div>
<div class="input-append date" data-date="" data-date-format="dd-mm-yyyy">
<label for="dp3">Date of Commencement of the internship</label> <br>
<input id="dp3" size="16" type="text" value="dd/mm/yyyy"/>
<span class="add-on"><i class="glyphicon glyphicon-calender" id="cal3"></i></span>
</div>
<div class="form-group">
<label for="inputOffice">address of the school</label>
<textarea type ="text" class = "form-control" id = "inputOffice" rows = "8" placeholder = "" ></textarea>
<span id="officeSpan"></span>
</div>
<div class="form-group">
<label for="inputWill">like school?</label>
<input type="text" class="form-control" id="inputWill" placeholder="">
</div>
<div class="form-group">
<label for="inputContribution">achievements</label>
<input type="text" class="form-control" id="inputContribution" placeholder="">
</div>
<div class="form-group">
<label for="inputSalary">fees</label>
<input type="text" class="form-control" id="inputSalary" placeholder="">
</div>
<div class="form-group">
<label for="inputaccolades">accolades</label>
<input type="text" class="form-control" id="inputaccolades" placeholder="">
</div>
</form></center>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="./js/jquery-1.11.3.js"></script>
<script>
$(document).ready (function (){
$("#dp1").datepicker();
$("#dp2").datepicker();
$('#dp3').datepicker();
$('.dropdown-toggle').dropdown()
});
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./js/bootstrap.min.js"></script>
<script src="./bootstrap-datepicker.js"></script> </body>
</html>
CSS :
form .form-group {
width : 500px;
}
.datepicker:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: 190px;
}
.datepicker:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
top: -6px;
left: 191px;
}
Any help is much appreciated. Thanks in advance

There are many ways to solve this issue:
Solution here: http://jsfiddle.net/lotusgodkk/GCu2D/820/
CSS:
.dropdown, .dropup {
position: relative;
display: inline-block;
}
Or
.dropdown, .dropup {
position: relative;
width: 250px;//any value
}
Explanation: The dropdown container has no defined width and due to which it automatically takes full width. When you click on dropdown,by default the dropdown menu will position itself to the leftmost of the dropdown class which is the left edge of the screen in this case.
Either define a width of the dropdown element so that the dropdown menu can position itself, else just use display:inline-block which will automatically take the width according to the content.
As pointed out in the comments, try to get rid of center tag

Categories