I have added some javascript to my form to validate the email before submitting the form. I dont want a seperate button to validate, i want it to be part of the form submit button. It works currently and a message comes up asking me to put a valid email address in. The problem is when i click "ok" it still tries to submit the form (and fails) instead of returning to the form to correct the email addres.
My Javascript:
<script language="javascript">
function checkEmail() {
var email = document.getElementById('txtEmail');
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email.value)) {
alert('Please provide a valid email address');
email.focus;
return false;
}
}</script>
My HTML:
<input type="text" name="email" id="txtEmail" />
<input type="SUBMIT" class="button" value="Submit Email" onclick='Javascript:checkEmail();' />
I cant figure out what the problem is. Any help would be appreciated. Cheers
Just add return before the function call:
<input type="SUBMIT" class="button" value="Submit Email" onclick='Javascript:return checkEmail();' />
Try this:
HTML:
<form name="whatever" action="action.asp" onsubmit="return validateForm()" method="post">
<input type="text" name="email" id="txtEmail" />
<input type="SUBMIT" class="button" value="Submit Email" />
</form>
JS (pseudocode)
function validateForm()
{
if (something) {
alert('validation failed');
return false;
}
}
There is not a major problem, the function is working fine but it is not returning back,
just add return before you call the function,
here is the example below:
<input type="SUBMIT" class="button" value="mail" onclick='Javascript:return checkEmail();' />
This will sort out your problem,
enjoy :)
Here is the rework of your code.
<script type="text/javascript">
function checkEmail() {
var email = document.getElementById('txtEmail');
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email.value)) {
alert('Please provide a valid email address');
email.focus;
return false;
}
}
</script>
<input type="text" name="email" id="txtEmail" />
<input type="SUBMIT" class="button" value="Submit Email" onclick='checkEmail();' />
Works as expected.
Related
I am very new to coding and just trying to learn how to make a simple validation, to check if text box is filled in or not, but it never seems to work for me... This is my code:
Html:
Username:<br/>
<input type="text" placeholder="Username" id="uname">
<input type="submit" id="check" value="OK" onclick="check()">
Javascript:
//IF TEXT BOX EMPTY, DISPLAY ALERT MESSAGE.
function check(){
var uname=document.getElementById(uname).value;
if (uname==""){
alert("Username is obligatory")
}
}
You have a few problems in your markup and script:
You're missing quotes around uname .getElementById("uname").value and your function won't stop the form from submitting if there are validation issues.
Here is the fix for the immediate problem and a simple solution to keep the form from submitting when there are validation issues.
<script>
function validateForm() {
var uname=document.getElementById("uname").value;
if (uname==""){
alert("Username is obligatory");
return false;
}
}
</script>
<form onSubmit="return validateForm()">
<input type="text" placeholder="Username" id="uname">
<input type="submit" id="check" value="OK">
</form>
Working Plnkr
I'm a beginner, and I need some help with my assignment. I can't work out what I've done wrong. The label and submit button appear in html, but when I click on the submit button it doesn't validate the form.
My assignment is to produce a form to enter your name. Onsubmit a function to validate the name is called that will validate that the name cannot be blank and must be more than 6 characters.
<html>
<head>
<body>
<form name="myForm" autocomplete="on" onsubmit="return validateForm()">
<p><label>First name (required) <input type="text" id="firstName"
autofocus="autofocus" /> </label></p>
</form>
<input type="submit" name="S1" value="Submit response" />
<script>
function validateForm(){
var firstName=document.getElementById("firstName");
if (firstName.value.length<6){
alert("Please enter your first name (6 characters or more)");
firstName.focus();
return false;
}
alert("Thank you for your submission");
return true;
}
</script>
</body>
</head>
</html>
Place submit button inside of form tag
function validateForm() {
var firstName = document.getElementById("firstName");
if (firstName.value.length < 6) {
alert("Please enter your first name (6 characters or more)");
firstName.focus();
return false;
}
alert("Thank you for your submission");
return true;
}
<html>
<head>
<body>
<form name="myForm" autocomplete="on" onsubmit="return validateForm()">
<p><label>First name (required)<input type="text" id="firstName"
autofocus="autofocus" /> </label></p>
<input type="submit" name="S1" value="Submit response" />
</form>
</body>
</head>
</html>
The problem with your code is that you try to return a result to an event. Events do not accept any response. So try this;
<html>
<body>
<form name="myForm" autocomplete="on" onsubmit="validateForm()">
<p>
<label>First name (required)</label>
<input type="text" id="firstName" autofocus="autofocus" />
</p>
<input type="submit" name="S1" value="Submit response" />
</form>
<script>
function validateForm(){
var firstName=document.getElementById("firstName");
if (firstName.value.length<6){
alert("Please enter your first name (6 characters or more)");
firstName.focus();
return false;
}
alert("Thank you for your submission");
document.getElementsByTagName("form")[0].submit()
}
</script>
</body>
</html>
Besides that, you put your body in your head, this can cause trouble with some browsers.
Your submit button is outside of form tag, that's why the onsubmit method is not gettting called.
Problem was in your code. Remember you have to put submit button under <form></form> tag. And always put JS code in <head></head> section.
Find below code and try hope this will work for you.
<html>
<head>
<script>
function validateForm() {
var firstName = document.getElementById("firstName");
if (firstName.value.length < 6) {
alert("Please enter your first name (6 characters or more)");
firstName.focus();
return false;
}
alert("Thank you for your submission");
return true;
}
</script>
</head>
<body>
<form name="myForm" autocomplete="on" onsubmit="return validateForm();">
<p><label>First name (required) <input type="text" id="firstName"
autofocus="autofocus" /> </label></p>
<input type="submit" name="S1" value="Submit response" />
</form>
</body>
</html>
I know there are a few threads on this topic, and in fact I got my code from one such thread, but I just can't seem to get it to run. I'm trying to compare two input boxes in an HTML form using javascript.
Here is my JS:
<script>
function checkform(form1)
{
if(form1.password.value != form1.passwordConfirm.value)
{
alert("Passwords must be the same");
form1.password.focus();
return true;
} else {return false;}
}
</script>
Here is the HTML:
<!Doctype html>
<script type="C:/wamp/www/Table/" src="javascript.js"></script>
<form name="form1" action="demo_form.asp">
Username: <input type="text" name="usrname" required oninvalid="this.setCustomValidity('Username cannot be empty.')">
Password: <input type="password" name="password" required oninvalid="this.setCustomValidity('Password cannot be empty')">
Confirm Password: <input type="password" name="passwordConfirm" required oninvalid="this.setCustomValidity('Password cannot be empty')">
<input type="submit" value="Submit" onClick="return checkform(form1);">
</form>
</html>
Any help would be awesome!
Thanks
Mike
You'll need to assign an id to your form, and get that.
Replace:
<form name="form1" action="demo_form.asp">
With:
<form name="form1" action="demo_form.asp" id="myForm">
And and this:
function checkform(form1){
With this:
function checkform(){
var form1 = document.getElementById('myForm')
You also need to switch your return statements, to return false when the PW's don't match.
The resulting JS / HTML:
function checkform(){
var form1 = document.getElementById('myForm');
if(form1.password.value != form1.passwordConfirm.value)
{
alert("Passwords must be the same");
form1.password.focus();
return false;
}
return true;
}
<form name="form1" action="demo_form.asp" id="myForm">
Username: <input type="text" name="usrname" required oninvalid="this.setCustomValidity('Username cannot be empty.')">
Password: <input type="password" name="password" required oninvalid="this.setCustomValidity('Password cannot be empty')">
Confirm Password: <input type="password" name="passwordConfirm" required oninvalid="this.setCustomValidity('Password cannot be empty')">
<input type="submit" value="Submit" onClick="return checkform();">
</form>
Notice how I removed the else around the second return statement. It's not needed.
Take out return from the onclick.
onClick="checkform(form1);"
I am a novice in web development, I have created a simple html page. The page has two buttons, Submit and Display Data. The Submit button is supposed to post form data to a particular page after validating the form. This button is working fine. I am facing a problem with the Display Data button. The button is supposed to open a separate page and there should not be any kind of form validation. The page is getting open but the form is also getting validated.
The html page:
<html>
<head>
<script>
function validateForm()
{
var name=document.forms["myForm"]["name"].value;
var email=document.forms["myForm"]["email"].value;
var mobile=document.forms["myForm"]["mobile"].value;
var address=document.forms["myForm"]["address"].value;
var atpos=email.indexOf("#");
var dotpos=email.lastIndexOf(".");
if (name==null || name=="")
{
alert("Name must be filled out");
return false;
}
else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)
{
alert("Not a valid e-mail address");
return false;
}
else if(isNaN(mobile)||mobile.indexOf(" ")!=-1)
{
alert("Enter numeric value")
return false;
}
else if (mobile.length != 10)
{
alert("Enter 10 digit mobile");
return false;
}
else if (mobile.charAt(0)=="0")
{
alert("Mobile no should not start with 0");
return false;
}
else if (address==null || address=="")
{
alert("Address must be filled out");
return false;
}
}
</script>
</head>
<body>
<h2>Employee Details Entry</h2>
<form name="myForm" action="insertDisplay.php" onSubmit="return validateForm()" method="post">
Name: <input type="text" name="name"><br/>
Email: <input type="text" name="email"><br/>
Mobile: <input type="text" name="mobile"><br/>
Address: <input type="text" name="address"><br/>
<input type="submit" value="Submit"> <button onClick="location.href = 'insertDisplay.php'">Display Data</button>
</form>
</body>
</html>
Where am I going wrong? Why is the form validation function getting called?
place
<button onClick="location.href = 'insertDisplay.php'">Display Data</button> this line out of the form...
give this button the type you want to behave it.
<button type="button" onClick="location.href = 'insertDisplay.php'">Display Data</button>
You can take the values out of the form, or you can use, <input type="button"/> tag. It will not submit your form and will work as you intended.
<input type="button" value="display data" onClick="location.href = 'a.php'">
I suppose you also want your datas to be passed to your PHP file after clicking your button ?
If you push the out of the form will not be sended and you'll have no datas.
In fact, you want both buttons to submit your form, but only the first one should validate it ?
If this is it you can do this :
<form name="myForm" action="insert.php" method="post">
Name: <input type="text" name="name"><br/>
Email: <input type="text" name="email"><br/>
Mobile: <input type="text" name="mobile"><br/>
Address: <input type="text" name="address"><br/>
<input type="submit" name="typesubmit" value="Submit" onclick="return validateForm();" />
<input type="submit" name="typesubmit" value="Display Data" />
</form>
You'll be abled on your insert.php file to make difference between display and submit by checking $_POST['typesubmit'] value.
And if you want your "display" button to post your form on another php file, you can do this :
<form name="myForm" action="insert.php" method="post">
Name: <input type="text" name="name"><br/>
Email: <input type="text" name="email"><br/>
Mobile: <input type="text" name="mobile"><br/>
Address: <input type="text" name="address"><br/>
<input type="submit" value="Submit" onclick="return validateForm();" />
<input type="submit" value="Display Data" onclick="document.myForm.action='display.php';" />
</form>
I have the following code, and need to get an alert that will specify which fields are empty or null, and return an alert for each empty or null field. I'm new to JavaScript and struggling a great deal with this. Can anyone give me some advice on this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkForm(form){
var len = form.length;
//create for loop
for (var i=0; i<len; i++){
if (form.elements[i].type=="text" || form.elements[i].type==null){
if (form.fax number.value=="" || form.fax number.type==null){
alert("Please fill out the fax number field");
}
}
}
}
function emailTest(emailText){
var email = emailText.value;
var emailPattern = /^.+#.+\..{2,}$/;
if (!(emailPattern.test(email))) {
alert("Please enter a valid email address.");
document.myForm[1].focus();
}
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<H3>Assignment 2 Form</H3>
<HR>
<FORM NAME="myForm" METHOD="post"
ACTION="mailto:joeschmoe#blahblah.ca">
Name:<BR>
<INPUT TYPE="text" size="30" NAME="name"><br>
Email address:<BR>
<INPUT TYPE="text" size="30" NAME="email address" onBlur="emailTest(this);"><br>
Phone number:<BR>
<INPUT TYPE="text" size="30" NAME="phone number"><br>
Fax number:<BR>
<INPUT TYPE="text" size="30" NAME="fax number"><p>
<INPUT TYPE="submit" VALUE="Submit Data" onClick="return checkForm(this.form);">
<INPUT TYPE="reset" VALUE="Reset Form">
</FORM>
</BODY>
</HTML>
Ok...wow. I spent way too much time on this.
Your form should look like the following:
<FORM NAME="myForm" id="myForm">
<label for="name">Name:</label><br />
<INPUT TYPE="text" size="30" NAME="name" /><br />
<label for="email_address">Email address:</label><BR />
<INPUT TYPE="text" size="30" NAME="email_address" /><br />
<label for="phone_number">Phone number:</label><BR />
<INPUT TYPE="text" size="30" NAME="phone_number" /><br />
<label for="fax_number">Fax number:</label><BR />
<INPUT TYPE="text" size="30" NAME="fax_number" /><br />
<INPUT TYPE="button" VALUE="Submit Data" onClick="return checkForm()" />
<INPUT TYPE="reset" VALUE="Reset Form" />
</FORM>
Form Summary:
You should utilize labels for form elements
Never use spaces for the name attribute or any identifying attribute for that matter (name, class, id)
inputs should end with /> as should any tag without an end tag (<br /> too)
I pulled out the onBlur event and just added it as a piece of the overall validation process. No need to make it too complicated
I used a button input type instead of a submit input type. See why in the JavaScript
And then your JavaScript:
function checkForm() {
var valid = false; //Set a boolean variable that will be changed on each block
//of validation
if (document.myForm.fax_number.value === "") {
alert("Please fill out the fax number field");
}
if (document.myForm.email_address.value === "") {
alert("Email address is required");
} else {
valid = emailTest(document.myForm.email_address.value);
}
//all other checks within if statements
if (valid) {
document.myForm.action = "mailto:soandso#so.com";
document.myForm.submit();
}
}
function emailTest(emailText) {
var emailPattern = /^.+#.+\..{2,}$/;
var ret = false;
if (!(emailPattern.test(emailText))) {
alert("Please enter a valid email address.");
} else {
ret = true;
}
return ret;
}
Javascript Summary
In JavaScript interacting with HTML forms, forms are called as such: document.formName where formName is the string in the name="" attribute of the form tag or document.forms[i] where i is the numerical instance of the form on the page, i.e. the first form on the page is i = 0, thus it would be called as document.forms[0]
Check each input by name for a value with document.myForm.(elementName).value where elementName is the string from your <input>s name attribute.
Instead of using a submit, I used a regular button. When the "Submit Data" button is clicked in the form, it runs checkForm() which makes sure everything is valid
If everything is valid, it assigns an action to the form with document.myForm.action=youraction and then submits it via JavaScript with document.myForm.submit()
Notes
Don't use W3Schools to learn about anything ever.
Read more about forms here