I am making a simple form validation page, but whenever I click on the Submit button, it doesn't display the label, after validating input from the text input field (in this case E-mail).
Here is the code:
function validate()
{
var regexp = new RegExp("/^([A-Za-z0-9_\.\.])+\#([A-Za-z0-9_\.\.])+\.([A-Za-z]{2,4})$/");
if(regexp.test(document.getElementById("emailInput").value))
{
document.getElementById('email').innerHTML = 'Invalid Format!';
}
}
<!doctype html>
<html>
<head>
<title> Abdul Basit's Home Page</title>
</head>
<body>
<center>
<form onsubmit="return validate()">
<fieldset>
<legend>Enter your details:</legend>
Name: <input type="text"><br/><br/>
Email: <input type="text" id="emailInput"><br/>
<label id="email"></label><br /><br />
CNIC: <input type="text"><br/>
<label id="cnic"></label><br /><br />
<input type="submit" name="Submit">
</fieldset>
</form>
</center>
</body>
</html>
Related
This question already has answers here:
reading innerHTML of HTML form with VALUE attribute (& its value) of INPUT tags
(2 answers)
Closed 1 year ago.
I am creating a project and want to print data that I put in input field on to hard copy ...
How can I do that?
for example:
If I have a table with input fields and I will input data into the field using browser, now, as soon as I am done with input, I want to print that information. (CODE UNDER), I took this code from W3schools: When I press print button, it prints the webpage.. but it does not print the information that is given to it...
How can I do that>
Here my code:
<!DOCTYPE html>
<html>
<title>Print form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<form method="post" action="" id="myfrm">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname">
<br> Last name:<br>
<input type="text" name="lastname">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
<p align="center"><input type="button" onclick="myPrint('myfrm')" value="print"></p>
<script>
function myPrint(myfrm) {
var printdata = document.getElementById(myfrm);
newwin = window.open("");
newwin.document.write(printdata.outerHTML);
newwin.print();
newwin.close();
}
</script>
</body>
</html>
'''
You are copying over the HTML, but not the field values, the code below will do the trick.
See that the input fields now have Id's and we copy them over right before newwin.print()
<!DOCTYPE html>
<html>
<title>Print form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<form method="post" action="" id="myfrm">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" id="first">
<br> Last name:<br>
<input type="text" name="lastname" id="last">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
<p align="center"><input type="button" onclick="myPrint('myfrm')" value="print"></p>
<script>
function myPrint(myfrm) {
var printdata = document.getElementById(myfrm);
newwin = window.open("");
newwin.document.write(printdata.outerHTML);
newwin.document.getElementById("first").value = document.getElementById("first").value;
newwin.document.getElementById("last").value = document.getElementById("last").value;
newwin.print();
newwin.close();
}
</script>
</body>
</html>
There is a form with 2 inputs and a button that resets the inputs. When the button is clicked, how can I make first input unchanged (i.e it should not reset the value). How can I achieve it?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add-More example - fileuploader - Innostudio.de</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"></script>
</head>
<body>
<div class="file-loading" style="margin: 50px;">
<form>
<input id="no_reset" type="text">
<input id="input-fa" type="text">
<button type="reset" onclick="removeReset()">
<i class="fas fa-sync"></i>submit
</button>
</form>
</div>
<script>
function removeReset() {
//it doesn't work
document.getElementById("no_reset").value = "dont reset";
}
</script>
</body>
</html>
If you have a lot of input, you can reset all fields except ones with a custom attribute.
Take a look at a sample vanilla js implementation :
function customReset()
{
var fieldsToReset = document.querySelectorAll("input:not([data-noreset='true'])")
for(var i=0;i<fieldsToReset.length;i++){
fieldsToReset[i].value = null;
}
}
<form id="myForm">
<input id="txt1" name="txt1" /> : should reset<br/>
<input id="txt2" name="txt2" /> : should reset<br/>
<input id="txt3" name="txt3" /> : should reset<br/>
<input id="txt4" name="txt4" data-noreset="true" /> : <strong>won't reset</strong><br/>
<button type="button" onclick="customReset()">
Reset
</button>
</form>
Pay attention to the type="button" attribute. This is required to neither reset the form nor submit it.
i'm testing a HTML using a to check what a servlet returned,
to choose which message i'll show. The app runs ok, the servlet returns correctly. The get what the servlet returned and chooses the message. But, the tag shows the message only for a second (like a flash) and erase shortly thereafter. Below you can see my code:
<!DOCTYPE html>
<html lang ="pt-br">
<head>
<title> loginServlet2 </title>
<meta http-equiv = ”Content-Type” content=”text/html; charset=UTF-8”>
<link rel="stylesheet" type="text/css" href="c:/java/html/css/estilo.css"/>
<script>
function oMsg()
{
var wMsg1 = document.getElementById('wMsg').innerHTML;
if (wMsg1 == "Test OK!")
{
document.getElementById('wMsga').innerHTML="Test is OK";
}
else
{
document.getElementById('wMsga').innerHTML="Test is not OK";
}
}
</script>
</head>
<body>
<h2> Login Page2 </h2>
<p>Please enter your username and password</p>
<form method="GET" action="loginServlet2">
<p> Username <input type="text" name="userName" size="50"> </p>
<p> Password <input type="text" name="password" size="20"> </p>
<p> <input type="submit" value="Submit" name="B1" onclick="oMsg()"> </p>
</form>
<p id="wMsg"> Msg1 : <%=request.getAttribute("wMsg")%></p>
<p id="wMsga"> Msg2 : </p>
</body>
</html>
Could you help me, please? Thanks.
I'm not sure if I'm answering what you are looking for, but adding return false to onclick will keep you on the same page:
<input type="submit" value="Submit" name="B1" onclick="oMsg(); return false;">
form.html
function validate() {
var name = document.Myform.name.value;
document.write(name);
}
<html>
<head>
<script src="validations.js"></script>
</head>
<body>
<form name="Myform" onsubmit="return validate()">
Enter name: <input type="text" name="name" /><br/><br/>
<input type="submit" />
</form>
</body>
</html>
Output: undefined
After typing my name in input box it is showing undefined.
The Problem is on your input. you should change t he name=="name" to name="name". Then change your validate function to us getElementsByName. See the code below:
<html>
<head>
<script>
function validate(){
var name=document.getElementsByName('name')[0].value;
document.write(name);
}
</script>
</head>
<body>
<form name="Myform" onsubmit="return validate()">
Enter name: <input type="text" name="name"><br><br>
<input type="submit" />
</form>
</body>
</html>
dont make use of name attribute it old way of W3C standard, from long time they are suggesting make use of id attribute.
you code needs to be like this
<input type="text" id="txtname"/><br><br>
and javascript like
var name=document.getElementById("txtname").value;
You just have to fix your name=="name". In HTML we use = to assign attribute values/
function validate() {
var name = document.Myform.name.value;
document.write(name);
}
<html>
<head>
<script src="validations.js"></script>
</head>
<body>
<form name="Myform" onsubmit="return validate()">
Enter name: <input type="text" name="name" /><br><br>
<input type="submit" />
</form>
</body>
</html>
the validate function doesn't return anything as would usually be the case for this type of event hander ~ it will instead simply write the name ~ is that the desired result?
<html>
<head>
<title>form validation</title>
<script src="validations.js"></script>
<script>
function validate(e){
e.preventDefault();
var name=e.target.querySelector('input[ name="name" ]').value;
document.write( name );
return true;
}
</script>
</head>
<body>
<form name="Myform" onsubmit="return validate(event)">
Enter name: <input type="text" name="name"/><br><br>
<input type="submit" />
</form>
</body>
</html>
I Write This code For Registration of a User. Now I want to Validate this Page Whether all the Fields are Filled by the user or Not. The Same Script Code I Write to Login page It's Showing an alert if any one filed empty in the page. But it is not working for this Page.
The Main Difference is i Used Div in Login Page here I Used Table.
Registration Page Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/Registration.css">
<script>
function validateForm()
{
var a=document.forms["regform"]["user"].value;
var b=document.forms["regform"]["pass"].value;
var c=document.forms["regform"]["copa"].value;
var d=document.forms["regform"]["mono"].value;
if(a==""||b==""||c=""||d="")
{
alert("Please Enter All the Fields");
return false;
}
else
{
window.location="afterregister.html"
//alert("Registered Successfully");
}
}
</script>
</head>
<body>
<h1>Registration</h1>
<form name="regform" onsubmit="return validateForm();" method="post">
<table>
<tr>
<td><label>Username:</label></td>
<td><input type="text" name="user"/></td>
</tr>
<tr>
<td><label>Password:</label></td>
<td><input type="text" name="pass"/></td>
</tr>
<tr>
<td><label>Confirm Password:</label></td>
<td><input type="text" name="copa"/></td>
</tr>
<tr>
<td><label>Mobile Number:</label></td>
<td><input type="text" name="mono"/></td>
</tr>
<tr>
<td></td>
<td><input type="button" onclick = "return validateForm()" value="Register" name="" class="row1" />
<input type="button" name="" value="Cancel" class="row1"></td>
</tr>
<tr>
<td></td>
<td><input type="button" name="" value="Forgot Password" class="row2"></td>
</tr>
</table>
</form>
</body>
</html>
Login Page Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/Login.css">
<script>
function myFunction()
{
var x=document.forms["loginform"]["user"].value;
var y=document.forms["loginform"]["pass"].value;
if(x==""||y=="")
{
alert("Please Enter All the Fields");
return false;
}
else
{
window.location="afterLogin.html"
}
}
</script>
</head>
<div></div>
<body>
<h1></h1>
<form name="loginform" onsubmit="return myFunction();" method="post">
<div class="username"><label>Username:</label><input type="text" name="user"/></div>
<div class="password"><label>Password:</label><input type="text" name="pass"/></div>
<div class="buttons"><input type="button" onclick = "return myFunction()" value="Login" name=""/> <input type="button" value="Cancel" name=""/></div>
</form>
</body>
You are already calling the validation function on your form submit onsubmit="return myFunction();". So there isn't any need to call it again on your button click. So please change
<input type="button" onclick = "return validateForm()" value="Register" name="" class="row1" />
to
<input type="submit" value="Register" name="" class="row1" />
And do this in your script
<script>
function validateForm()
{
var a=document.forms["regform"]["user"].value;
var b=document.forms["regform"]["pass"].value;
var c=document.forms["regform"]["copa"].value;
var d=document.forms["regform"]["mono"].value;
if(a===""||b===""||c===""||d==="")
{
alert("Please Enter All the Fields");
return false;
}
else
{
window.location="afterregister.html"
//alert("Registered Successfully");
}
}
</script>
Solution:
Do the following 2 steps:
1- First close your <input> tags as either of the following method:
i. <input type = "textbox" name = "name" /> <!-- This is suggested -->
OR
ii. <input type = "textbox" name = "name"></input>
2- Go through these 2 useful links - it will guide you through what you exactly need:
Form Validation Tutorial - 1
Form Validation Tutorial - 2