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
}
});
});
Related
I am trying to validate my form, but the console never shows me errors. I have done what the Bootstrap documentation says and nothing happened. I want, for example, that when clicking on the button, if any field is empty, it shows an alert or error in that field. If someone can help me, I will be very grateful.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/e6233a0317.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./css/product.css">
<link rel="stylesheet" href="./css/styles.css">
<link rel="stylesheet" href="./css/help.css">
<link rel="stylesheet" href="./css/tags.css">
<title>TejidosPulido E-Commerce</title>
</head>
<body>
<header id="header_menu"></header>
<br>
<main role="main">
<div class="container rounded" style="background-color: rgb(228, 225, 225);">
<br>
<form class="needs-validation" novalidate style="padding: 15px 40px;">
<div class="row">
<div class="col-sm-6" style="margin-bottom: 50px;">
<div class="input-group mb-3">
<span class="input-group-text title" for="validationDefault01">Número de producto</span>
<input type="text" class="form-control" id="inputNum" style="text-align: end;" required>
<div class="invalid-feedback">Please choose a username.</div>
</div>
<div class="input-group" style="width: 100%;">
<span class="input-group-text title" for="inputNum">Visible</span>
<div class="input-group-text" style="background: white">
<span class="input-group-addon"><input type="radio" id="visible" name="visibilidad" value="always"> Si</span>
<span class="input-group-addon"><input type="radio" id="invisible" name="visibilidad" value="never"> No</span>
</div>
</div>
<div class="invalid-feedback">Field empty.</div>
</div>
<div class="col-sm-6"></div>
</div>
<div class="row">
<div class="col-sm-7"></div>
<div class="col-sm-4">
<span class="input-group-text title">Imagen de producto</span>
</div>
<div class="col-sm-1"></div>
</div>
<div class="row">
<div class="col-sm-6" style="margin-bottom: 15px;">
<div class="input-group mb-3">
<span class="input-group-text title" for="inputName">Nombre del producto</span>
<input type="text" class="form-control" id="inputName" required>
</div>
<div class="invalid-feedback">Field empty.</div>
</div>
<div class="col-sm-1"></div>
<div class="col-sm-4">
<div class="input-group mb-3">
<input type="file" class="form-control" id="inputImage" accept="image/*">
</div>
</div>
<div class="col-sm-1"></div>
</div>
<br>
<div class="row">
<div class="col-sm-4" style="vertical-align: middle; padding-bottom: 10px;">
<div class="input-group mb-3">
<span class="input-group-text precio title">Precio</span>
<input type="text" class="form-control" id="inputPrecio" placeholder='0.00' required style="float: left; text-align: end; width: 30%;" pattern="([0-9]*)(.)?([0-9]*)" title="Introduce un número.">
<span class="input-group-text short">€/m</span>
</div>
<div class="invalid-feedback">Field empty.</div>
</div>
<div class="col-sm-4" style="vertical-align: middle; padding-bottom: 10px;">
<div class="input-group mb-3">
<span class="input-group-text peso title">Peso</span>
<input type="text" class="form-control" id="inputPeso" placeholder='0' required style="float: left; text-align: end; width: 30%;" pattern="([0-9]*)(.)?([0-9]*)" title="Introduce un número.">
<span class="input-group-text short">gr/m</span>
</div>
<div class="invalid-feedback">Field empty.</div>
</div>
<div class="col-sm-4" style="vertical-align: middle; padding-bottom: 10px;">
<div class="input-group mb-3">
<label class="input-group-text tipo-large" for="product_type" style="background: #0bbe83; color: white; font-weight: bold;">Tipo de producto</label>
<select class="form-select" id="product_type">
<option selected>Selecciona...</option>
<option value="referencia">Referencia</option>
<option value="color">Color</option>
</select>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-6">
<span class="input-group-text title" for="inputDescripcion">Descripción:</span>
<textarea id="inputDescripcion" name="inputDescripcion" rows="5" style="width: 100%; padding: 10px;"></textarea>
</div>
<div class="col-sm-6">
<span class="input-group-text title" for="inputFunciones">Funciones bàsicas:</span>
<textarea id="inputFunciones" name="inputFunciones" rows="5" style="width: 100%; padding: 10px;"></textarea>
</div>
</div>
<br>
<div class="btn-group" role="group" style="float:right">
<button class="btn btn-dark" id="guardarButton" type="submit" class="btn btn-sm btn-outline-secondary">Guardar </button>
</div>
<br>
<br>
<br>
</form>
</div>
<hr class="featurette-divider">
<footer class="container" id= "footer"></footer>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-storage.js"></script>
<script src='./js/firebaseConfig.js'></script>
<script src="./js/session.js"></script>
<script src="./js/header.js"></script>
<script src="./js/newproducto.js"></script>
<script src="./js/footer.js"></script>
</body>
</html>
This is the javascript function:
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
Span for and input id should be the same.
In your case error is actually detecting but not able to assign to the correct id w.r.t for
"I am trying to validate my form, but the console never shows me
errors"
The console shouldn't show errors because the code is working as expected.
Most likely there's a conflict with one of the many other JS files included in your environment. Also the HTML is poorly is structured (2 class attributes on the button) and the invalid-feedback needs to be in the same parent as the inputs.
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="">
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>
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
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
This is my login page I want to place my login-box over canvas now first show canvas and then show the div i want login-box div over this canvas
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="bootstrap/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link href="dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" /> </head> <body class="login-page"> <canvas id="header-canvas" style="background-color:#999"> <header id="header" > </header> </canvas> <div class="login-box" > <div class="login-box-body"> <form action="" method="post" name="login"> <div class="form-group has-feedback "> <input type="text" class="form-control" placeholder="Username / Email" required name="login_name"/> <span class="glyphicon glyphicon-envelope form-control-feedback"></span> </div> <div class="form-group has-feedback"> <input type="password" class="form-control" placeholder="Password" name="login_pass"required/> <span class="glyphicon glyphicon-lock form-control-feedback"></span> </div> <div class="row"> <div class="col-xs-4"> <button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button> </div> </div> </form> </div> </div> <script src="plugins/jQuery/jQuery-2.1.3.min.js"></script> <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <script src="plugins/magnificpopup/plugins.js"></script> </body> </html>
Following way you can put put over canvas using position:absolute;
#header-canvas {
height: 500px;
width: 100%;
}
.login-box {
background: #fff none repeat scroll 0 0;
left: 50%;
padding: 20px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="header-canvas" style="background-color:#999"> <header id="header" > </header> </canvas>
<div class="login-box" > <div class="login-box-body">
<form action="" method="post" name="login">
<div class="form-group has-feedback ">
<input type="text" class="form-control" placeholder="Username / Email" required name="login_name"/>
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password" name="login_pass"required/>
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row"> <div class="col-xs-4">
<button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button> </div>
</div>
</form>
</div>
</div>
Working Fiddle