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
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 created a dynamic inline form with bootstrap 4 and javascript. I would like to fit all my fields in one row when viewed in a desktop/laptop browser. In the mobile view, I want to stack all my fields one below the other and they should be of equal width.
I tried the bootstrap grid column layout and also attempted to fix a width for each field but it does not seem to be working. Please help.
The HTML code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEST PAGE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="TEST">
<meta name="author" content="TEST">
<!-- <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico"> -->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">
</head>
<body>
<header>
</header>
<!-- Begin page content -->
<main role="main" class="container">
<div class="container">
<h3>EXAM SCHEDULE</h3><br>
<form class="form-inline" id="fields" method="post" enctype="multipart/form-data">
<div id="inside-container"></div>
<div class="form-group p-2">
<input type="text" class="form-control" id="status" name="status[]" value="" placeholder="Text message" maxlength="160">
</div>
<div class="form-group p-2">
<input type="file" id="media" name="media[]" value="" placeholder="Media" accept="image/*|video/*">
</div>
<div class="form-group p-2">
<input type="date" class="form-control" id="datesched" name="datesched[]" value="" placeholder="Scheduled Date" max="2100-12-31" min="2019-11-01">
</div>
<div class="form-group p-2">
<select class="form-control" id="recurrence" name="recurrence[]">
<option value="0">Once</option>
<option value="7">Weekly</option>
<option value="30">Monthly</option>
<option value="90">Quarterly</option>
<option value="365">Yearly</option>
</select>
</div>
<div class="input-group">
<div class="form-group p-2">
<select class="form-control" id="profile" name="profile[]">
<option value="1">A</option>
<option value="2">B</option>
</select>
</div>
<button class="btn btn-success" type="button" onclick="fields();"><span>+</span></button>
</div>
</form>
</div>
<script src="dynamicform.js"></script>
</main>
</body>
</html>
The javascript code is provided below:
var room = 1;
function fields() {
room++;
var objTo = document.getElementById('inside-container')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+room);
var rdiv = 'removeclass'+room;
divtest.innerHTML = '<div class="form-group p-2"> <input type="text" class="form-control" id="status" name="status[]" value="" placeholder="Text message" maxlength="160"></div><div class="form-group p-2"><input type="file" id="media" name="media[]" value="" placeholder="Media" accept="image/*|video/*"></div><div class="form-group p-2"><input type="date" class="form-control" id="datesched" name="datesched[]" value="" placeholder="Scheduled Date" max="2100-12-31" min="2019-11-01"></div><div class="form-group p-2"><select class="form-control" id="recurrence" name="recurrence[]"><option value="0">Once</option><option value="7">Weekly</option><option value="30">Monthly</option><option value="90">Quarterly</option><option value="365">Yearly</option></select></div><div class="input-group"><div class="form-group p-2"><select class="form-control" id="profile" name="profile[]"><option value="1">A</option><option value="2">B</option></select></div><button class="btn btn-danger" type="button" onclick="remove_fields('+ room +');"><span>-</span></button></div><div class="clear"></div>';
objTo.appendChild(divtest)
}
function remove_fields(rid) {
$('.removeclass'+rid).remove();
}
I am unable to fit all the fields in one row in desktop view. I want my inline form to be mobile-responsive as well. Please advise.
See I have changed few things in your code . What I did was just added col-sm for div classes. You can find more about bootstrap grid system via this link. Bootstrap Grid System . Please go through the code because I have removed some codes from your original code. I think you expect this.To see the result please expan the snippet and then with Inspect Element in you browser and then navigate to mobile view . Thanks
Desktop view
Mobile view
var room = 1;
function fields() {
room++;
var objTo = document.getElementById('inside-container')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+room);
var rdiv = 'removeclass'+room;
divtest.innerHTML = '<div class="form-group p-2 col-sm-3"> <input type="text" class="form-control" id="status" name="status[]" value="" placeholder="Text message" maxlength="160"></div><div class="form-group p-2 col-sm-2"><input type="file" id="media" name="media[]" value="" placeholder="Media" accept="image/*|video/*"></div><div class="form-group p-2 col-sm-2"><input type="date" class="form-control" id="datesched" name="datesched[]" value="" placeholder="Scheduled Date" max="2100-12-31" min="2019-11-01"></div><div class="form-group p-2 col-sm-2"><select class="form-control" id="recurrence" name="recurrence[]"><option value="0">Once</option><option value="7">Weekly</option><option value="30">Monthly</option><option value="90">Quarterly</option><option value="365">Yearly</option></select></div><div class="form-group p-2 col-sm-1"><select class="form-control" id="profile" name="profile[]"><option value="1">A</option><option value="2">B</option></select></div> <div class="form-group p-2 col-sm-1"><button class="btn btn-danger btn-lg btn-block" type="button" onclick="remove_fields('+ room +');"><span>-</span></button></div><div class="clear col-sm-1"></div>';
objTo.appendChild(divtest)
}
function remove_fields(rid) {
$('.removeclass'+rid).remove();
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEST PAGE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="TEST">
<meta name="author" content="TEST">
<!-- <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico"> -->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">
</head>
<body>
<header>
</header>
<!-- Begin page content -->
<main role="main" class="container">
<div class="container">
<h3>EXAM SCHEDULE</h3><br>
<form class="form-inline" id="fields" method="post" enctype="multipart/form-data">
<div id="inside-container"></div>
<div class="form-group p-2 col-sm-3">
<input type="text" class="form-control" id="status" name="status[]" value="" placeholder="Text message" maxlength="160">
</div>
<div class="form-group p-2 col-sm-2">
<input type="file" id="media" name="media[]" value="" placeholder="Media" accept="image/*|video/*">
</div>
<div class="form-group p-2 col-sm-2">
<input type="date" class="form-control" id="datesched" name="datesched[]" value="" placeholder="Scheduled Date" max="2100-12-31" min="2019-11-01">
</div>
<div class="form-group p-2 col-sm-2">
<select class="form-control" id="recurrence" name="recurrence[]">
<option value="0">Once</option>
<option value="7">Weekly</option>
<option value="30">Monthly</option>
<option value="90">Quarterly</option>
<option value="365">Yearly</option>
</select>
</div>
<div class="form-group p-2 col-sm-1">
<select class="form-control" id="profile" name="profile[]">
<option value="1">A</option>
<option value="2">B</option>
</select>
</div>
<div class="form-group p-2 col-sm-1">
<button class="btn btn-success btn-lg btn-block" type="button" onclick="fields();"><span>+</span></button>
</div>
</form>
</div>
<script src="dynamicform.js"></script>
</main>
</body>
</html>
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
}
});
});
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>
l got a landing page up and running here compare.comxa.com..when l try to view on my android device only the form shows,the background image is no where to be found. please can you help.
this is the code
body {
height:100%;
background: url("http://bit.ly/1MOnMVB") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
#mc_embed_signup {
background:#fff;
clear:left;
font:14px Helvetica,Arial,sans-serif;
position:absolute;
top:85px;
left:35px;
border-radius:5px;
}
h2 {
color:orange;
font-weight:bold;
text-align:center;
}
h5 {
color:#483D8B;
text-align:center;
}
<!DOCTYPE HTML>
<html>
<head>
<title>black friday deals</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="author" content="ataga austin">
<meta name="keywords" contents="black friday,deals,black firday deals,black friday deal comapre">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class=" col-xs-12 col-md-12">
<div class="row">
<div class=" col-xs-12 col-md-4">
<div id="mc_embed_signup">
<form action="//comxa.us12.list-manage.com/subscribe/post?u=3380c08f529e58f0eadc50f43&id=ab83c00a63" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Best Black Friday Deals</h2>
<h5>Compare Prices Across Your Favourite Stores</h5>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder=" something#some.com">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">Name </label>
<input type="text" value="" name="NAME" class="" id="mce-NAME" placeholder=" smith davis">
</div>
<div class="mc-field-group">
<label for="mce-PRODUCT">PRODUCT </label>
<input type="text" value="" name="PRODUCT" class="" id="mce-PRODUCT" placeholder="apple tv" >
</div>
<div class="mc-field-group">
<label for="mce-LNAME">FAVORITE STORE </label>
<input type="text" value="" name="STORE" class="" id="mce-STORE" placeholder=" amazon">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"> </div>
<div class="response" id="mce-success-response" style="display:none"> </div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3380c08f529e58f0eadc50f43_ab83c00a63" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-success"></div>
</div>
</form>
</div>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
<script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='PRODUCT';ftypes[2]='text';fnames[3]='STORE';ftypes['3']='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
</div>
</div>
</div>
</div>
</body>
</html>
It looks like you're trying to load the background image from a protected ftp server. That works only in the following format ftp://user:password#server.tld
BUT that's clearly not recommended (password in cleartext!)
So rather than doing something stupid as that move the file to the right directory on the web server and just reference it like this: background-image: url(bkg1.jpeg);
Background image is not loading because it can't get access to to your account where you have your image Just change image url and it will work
background: url("http://www.wallpapereast.com/static/images/HD-Wallpapers1_Q75eDHE.jpeg") no-repeat center center fixed;