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'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>
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.
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>
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.
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.