How to build a bootstrap form validation? - javascript

I have been trying to create a form validated for my call-back form (Full name and Phone number only), but does not work. please can you help me how to update the JavaScript check the valid INPUT information?
I want the valid Full name format such as "First Name Last Name" and UK phone number format as the valid information, the valid fields turn green (with a tickmark), thereby giving immediate feedback to users. please see my code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form method="post" action="php/call-back.php">
<div class="row">
<div class="col-lg-12 form-group">
<input id="name" type="text" name="name" placeholder="Enter your Full Name" class="form-control" required>
</div>
<div class="col-lg-12 form-group">
<input id="phone" type="tel" name="phone" placeholder="Enter your phone number" class="form-control" required>
</div>
<div class="col-lg-12 form-group">
<input type="hidden" name="save" value="contact">
<button type="submit" class="btn btn-default pull-right">Submit</button>
</div>
</div>
</form>
<!-- JavaScript -->
<script src="js/bootstrap.js"></script>
<script src="js/jquery-1.10.2.js"></script>
</body>
</html>
Thanks a lot.

Related

I can't show an alert and it doesn't take the name variable validation

I'm doing a brief validation of .name but I can't get the alert to show any ideas? I don't know if I'm missing something or if I'm doing something wrong, I appreciate your help
HTML
<!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.0">
<link rel="stylesheet" href="./style.css">
<title>Proyecto Poker</title>
</head>
<body>
<form action="" id="form">
<div class="form">
<h1>FORMULARIO DE REGISTRO</h1>
<div class="grupo">
<input type="text" name="" placeholder="Name" id="nombre"><span class="barra"></span>
</div>
<div class="grupo">
<input type="text" name="" placeholder="Apellido" id="apellido"><span class="barra"></span>
</div>
<div class="grupo">
<input type="number" name="" placeholder="Edad" id="edad"><span class="barra"></span>
</div>
<div class="grupo">
<input type="email" name="" placeholder="Email" id="email"><span class="barra"></span>
</div>
<div class="grupo">
<input type="password" name="password" placeholder="Password" id="password"><span class="barra" ></span>
</div>
<button type="submit">Registrarse</button>
</div>
</form>
<script src="./main.js"></script>
</body>
</html>
it does not take the validation of the name variable I do not know if I am omitting something or if it is wrong any help is welcome I am just getting started in javascript and I do not have much knowledge thank you very much
JS
document.getElementById('form').addEventListener('submit', (e) => {
e.preventDefault();
let nombre = document.getElementById('nombre').value;
let apellido = document.getElementById('apellido').value;
let edad = document.getElementById('edad').value;
let email = document.getElementById('email').value;
let password = document.getElementById('passsword');
let expRegNombre = /^\s+$/;
if(nombre == null || nombre.lenght == 0 || expRegNombre.test(nombre)){
alert('nombre invalido')
}
})
This is working as expected. You had a typo where "nombre.lenght == 0" should be nombre.length == 0.
See working snippet below:
document.getElementById('form').addEventListener('submit', (e) => {
e.preventDefault();
let nombre = document.getElementById('nombre').value;
let apellido = document.getElementById('apellido').value;
let edad = document.getElementById('edad').value;
let email = document.getElementById('email').value;
let password = document.getElementById('passsword');
let expRegNombre = /^\s+$/;
if(nombre == null || nombre.length == 0 || expRegNombre.test(nombre)){
alert('nombre invalido')
}
})
<!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.0">
<link rel="stylesheet" href="./style.css">
<title>Proyecto Poker</title>
</head>
<body>
<form action="" id="form">
<div class="form">
<h1>FORMULARIO DE REGISTRO</h1>
<div class="grupo">
<input type="text" name="" placeholder="Name" id="nombre"><span class="barra"></span>
</div>
<div class="grupo">
<input type="text" name="" placeholder="Apellido" id="apellido"><span class="barra"></span>
</div>
<div class="grupo">
<input type="number" name="" placeholder="Edad" id="edad"><span class="barra"></span>
</div>
<div class="grupo">
<input type="email" name="" placeholder="Email" id="email"><span class="barra"></span>
</div>
<div class="grupo">
<input type="password" name="password" placeholder="Password" id="password"><span class="barra" ></span>
</div>
<button type="submit">Registrarse</button>
</div>
</form>
<script src="./main.js"></script>
</body>
</html>

Changing text on input (not placeholder)

the idea is to change the text inside the text input with a button, but i cant get it to work even without it! just by pure code i want to set it to '123' but it wont change no matter what, clearly the problem is in the HTML but i dont seem to find it. Here's what im writing in JS :
let contraseña = document.getElementById("contraseñaGenerada");
contraseña.value = "123";
I also tried with the following but it didnt work either.
contraseña.innerText = "123";
Here's the HTML:
<!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.0">
<title>Password Generator</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1 class="Texto">Welcome to our password generator.</h1>
<h3 class="Texto">Use our free online generator to get access to a highly secure random password of your liking. Choose the characters you want on your password and let the generator do the rest.</h3>
<br><br><br>
<h2 class="Texto">Customize your password.</h2>
<br>
<div id="divCentro">
<input type="text" name="contraseñaGen" id="contraseñaGenerada" >
<div id="botones">
<button class="boton">Copy to clipboard.</button>
<button class="boton">Generate again.</button>
</div>
</div>
<div id="Caracteristicas">
<div id="Izquierda">
<label for="barritaRange" class="TextoChico">Longitud de la contraseña: <br></label>
<input type="number" id="numeroLongitud"><input type="range" name="barrita" id="barritaRange">
</div>
<div id="Derecha">
<input type="checkbox" id="FacilDecir">
<label for="FacilDecir" class="TextoChico" >Facil de decir.</label>
<input type="checkbox" id="Minus">
<label for="Minus" class="TextoChico" >Incluye minusculas.</label>
<input type="checkbox" id="Mayus">
<label for="Mayus" class="TextoChico" >Incluye mayusculas.</label>
<input type="checkbox" id="Nums">
<label for="Nums" class="TextoChico" >Incluye numeros.</label>
<input type="checkbox" id="Simbolos">
<label for="Simbolos" class="TextoChico" >Incluye simbolos.</label>
</div>
</div>
</div>
</body>
</html>
You can always set input value with element.value property
let contraseña = document.getElementById("contraseñaGenerada");
contraseña.value = 'My Value';
<!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.0">
<title>Password Generator</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1 class="Texto">Welcome to our password generator.</h1>
<h3 class="Texto">Use our free online generator to get access to a highly secure random password of your liking. Choose the characters you want on your password and let the generator do the rest.</h3>
<br><br><br>
<h2 class="Texto">Customize your password.</h2>
<br>
<div id="divCentro">
<input type="text" name="contraseñaGen" id="contraseñaGenerada" >
<div id="botones">
<button class="boton">Copy to clipboard.</button>
<button class="boton">Generate again.</button>
</div>
</div>
<div id="Caracteristicas">
<div id="Izquierda">
<label for="barritaRange" class="TextoChico">Longitud de la contraseña: <br></label>
<input type="number" id="numeroLongitud"><input type="range" name="barrita" id="barritaRange">
</div>
<div id="Derecha">
<input type="checkbox" id="FacilDecir">
<label for="FacilDecir" class="TextoChico" >Facil de decir.</label>
<input type="checkbox" id="Minus">
<label for="Minus" class="TextoChico" >Incluye minusculas.</label>
<input type="checkbox" id="Mayus">
<label for="Mayus" class="TextoChico" >Incluye mayusculas.</label>
<input type="checkbox" id="Nums">
<label for="Nums" class="TextoChico" >Incluye numeros.</label>
<input type="checkbox" id="Simbolos">
<label for="Simbolos" class="TextoChico" >Incluye simbolos.</label>
</div>
</div>
</div>
</body>
</html>
After almost half an hour i realized its because my
<script src="script.js"></script>
was on the top instead of bottom of body, make sure to add it to the end.. omg.

Form Input Field Required attribute is not working in Google app script HTML web app

Updated Codeenter image description here
If i remove
Its show reuried filed notoifcation in input filed however if i add the jquery it's allowing me to submit the data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=], initial-scale=1.0">
<title>Document</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="email2" type="email" class="validate" required="" aria-required="true">
<label for="email2">Email</label>
</div>
<div class="input-field col s12">
<input id="example" name="example" type="text" class="validate" required="" aria-required="true">
<label for="example">Field</label>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light" type="submit" name="action" onclick="submitForm(this)">Submit</button>
</div>
</div>
</form>
</div>
<script>
function submitForm(btnClicked) {
$("button").attr("disabled", true);
var jsonObj = {};
jsonObj["FirstName"] = $("#email2").val();
jsonObj["MiddleName"] = $("#example").val();
jsonObj["Submit"] = $(btnClicked).text();
google.script.run.withSuccessHandler(action).saveDate(jsonObj);
}
</script>
</body>
</html>
Form Input Field Required attribute is not working in Google app script HTML web app
Using materialize CSS in my web app -In both the input filed have added Required attribute however on click submit button not getting any notification in input filed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=], initial-scale=1.0">
<title>Document</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="email2" type="email" class="validate" required="" aria-required="true">
<label for="email2">Email</label>
</div>
<div class="input-field col s12">
<input id="example" name="example" type="text" class="validate" required="" aria-required="true">
<label for="example">Field</label>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light" type="submit" name="action" onclick="submitForm(this)">Submit</button>
</div>
</div>
</form>
</div>
<script>
function submitForm(btnClicked) {
$("button").attr("disabled", true);
var jsonObj = {};
jsonObj["FirstName"] = $("#email2").val();
jsonObj["MiddleName"] = $("#example").val();
jsonObj["Submit"] = $(btnClicked).text();
google.script.run.withSuccessHandler(action).saveDate(jsonObj);
}
</script>
</body>
</html>

Can't write in other language in my login form

I created a login to my site. That you need to enter username and password:
All is working fine. But the problem is when i write in Hebrew (without clicking the login button) it immediately send an error.
Fiddle:
https://jsfiddle.net/L8ynedar/2/
HTML Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<section class="container" id="overlay">
<div class="login" id="overlay">
<h1>Barometer Login</h1>
<form method="post" >
<p>
<input type="text" name="username" id="username" value="" placeholder="Username" required="required" >
</p>
<p>
<input type="password" name="password" id="password" value="" placeholder="Password" required="required" >
</p>
<p class="remember_me"> </p>
<p class="submit">
<input class="btn btn-primary" style="background-color:purple;" onClick="SignInFunction(this.value)" name="commit" value="Login">
</p>
</form>
</div>
</section>
JS Code:
function SignInFunction(val){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if(username=="Anna" && password=="123"){
document.getElementById("AftetLogin").style.display = "block";
document.getElementById("overlay").style.display = "none";
}
}
After a lot of debugging. I found that, no matter where i am writing in Hebrew There is a alert bug of javascript.

problem with my drop down login box?

i have a simple Jquery script which allow me to place a nice drop down login box but i have a simple issue with it
when i tried to place more than 1 box lets say 5 the script totally messed
i believe its something regarding the DIV id's and duplication but i don't find a way to resolve this problem
JS code
// Login Form
$(function() {
var button = $('#loginButton');
var box = $('#loginBox');
var form = $('#loginForm');
button.removeAttr('href');
button.mouseup(function(login) {
box.toggle();
button.toggleClass('active');
});
form.mouseup(function() {
return false;
});
$(this).mouseup(function(login) {
if(!($(login.target).parent('#loginButton').length > 0)) {
button.removeClass('active');
box.hide();
}
});
});
html code
<!doctype html>
<html>
<head>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Dropdown Login Freebie | The Finished Box</title>
<link rel="stylesheet" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
<script src="js/login.js"></script>
</head>
<body>
<div id="bar">
<div id="container">
<!-- Login Starts Here -->
<div id="loginContainer">
<span>Login</span><em></em>
<div style="clear:both"></div>
<div id="loginBox">
<form id="loginForm">
<fieldset id="body">
<fieldset>
<label for="email">Email Address</label>
<input type="text" name="email" id="email" />
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password" id="password" />
</fieldset>
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
</fieldset>
<span>Forgot your password?</span>
</form>
</div>
</div>
<!-- Login Ends Here -->
</div>
</div>
</body>
</html>
Yes, Change the ID's and It will work for more than one.

Categories