Moving event handlers to separate document - javascript

I am currently using this HTML code:
<form onsubmit="return validateForm()" action="page.html" >
Name: <input type="text" id="name" /><br />
Email: <input type="text" id="email" /><br />
<input type="submit" value="Submit" />
</form>
But I would like to move my event handlers into my separate javascript, into the function named initiate. My javascript looks like this:
function formValidator(){
var name = document.getElementById("name");
var email = document.getElementById("email");
if(isAlphabet(name, "Fill in name"))
{
if(emailValidator(email, "Fill in email"))
{
return true;
}
}
return false;
}
function isAlphabet(elem, helpMsg)
{
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp))
{
return true;
}
else
{
alert(helpMsg);
elem.focus();
return false;
}
}
function emailValidator(elem, helpMsg)
{
var emailExp = /^[\w\-\.\+]+\#[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp))
{
return true;
}
else
{
alert(helpMsg);
elem.focus();
return false;
}
}
function initiate {
// ..
}
window.onload = initiate;
So far I've only figured out how to write the code to redirect to the new webpage but it doesn't check that it is a valid code. I've used this:
HTML
<form id="form">
Name: <input type="text" id="name" /><br />
Email: <input type="text" id="email" /><br />
<input type="submit" value="Submit" />
</form>
Javascript
document.getElementById("form").action = "page.html";
But I can't figure out how to write so that both the .action="page.html" and the return validateForm()is working.

Your form needs an id :
<form id="form">
Name: <input type="text" id="name" /><br />
Email: <input type="text" id="email" /><br />
<input type="submit" value="Submit" />
</form>
Separate Javascript file:
function initiate()
{
var form = document.getElementById("form");
form.action = "page.html";
form.onsubmit = function validateForm()
{
var name = document.getElementById("name");
var email = document.getElementById("email");
if(isAlphabet(name, "Fill in name"))
{
if(emailValidator(email, "Fill in email"))
{
return true;
}
}
return false;
};
}
window.onload = initiate;
Make sure the validateForm() function is returning false if something didn't validate.

Related

return false but submit

i try two way to solve this problem
<form method="post">
<input type="text" id="testId" name="testId" placeholder="Email" />
<button id="btnValidate" type="submit" onclick="return check();">subscribe</button>
</form>
and other way is
<form method="post" onsubmit="return check();">
<input type="text" id="testId" name="testId" placeholder="Email" />
<button id="btnValidate" type="submit">subscribe</button>
</form>
my js is
function check() {
var email = document.getElementById("testId").value;
var exptext = /^[A-Za-z0-9_\.\-]+#[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
if(exptext.test(email)==false){
alert("error");
document.addjoin.email.focus();
return false;
}else{
alert("complete");
return true;
}
}
alert show "error" but submit wrong email.
What did I do wrong?
<form method="post" id="form">
<input type="text" id="testId" name="testId" placeholder="Email" />
<button id="btnValidate" type="submit">subscribe</button>
</form>
<script>
let form = document.querySelector('#form');
form.addEventListener('submit', function(e) {
e.preventDefault();
check();
});
</script>
<script>
function check() {
let email = document.getElementById("testId").value;
let exptext = /^[A-Za-z0-9_\.\-]+#[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
if(exptext.test(email) === false){
alert("error");
document.addjoin.email.focus();
return false;
} else {
alert("complete");
return true;
}
}
</script>
This should work
You just need to remove the onclick="return check();"
Then you just need to add document.getElementById("btnValidate").onclick = check; to your js and it would work

Email validation for specific domain name with form action changer

<form name="form" method="post" action="">
<input name="email" type="email" id="email" placeholder="email#school.com" required>
<input name="name" type="text" id="name" placeholder="name" required>
<button type="submit" id="submit">Submit!</button>
</form>
<script>
function IsValidEmail(email)
$(document).ready(function() {
$("#form").submit(function() {
var allowedDomains = [ 'school1.com', 'school2.com', 'school3.com' ];
if ($.inArray(str[0], allowedDomains) !== -1) {
//acceptable
}else{
//not acceptable
}
document.getElementById('email').onchange = function(){
document.getElementById('FORM_ID').action = '/'+this.value;
}
</script>
can u help me please
thank you
please check this code,
<form name="form" id="form_action" method="post" action="">
<input name="email" type="email" id="email" placeholder="email#school.com" required>
<input name="name" type="text" id="name" placeholder="name" required>
<button type="submit" id="submit" onclick="check_email()">Submit!</button>
</form>
and this is your javascript code
<script type="text/javascript">
function check_email(){
var email = document.getElementById("email").value;
if(email == ''){
alert('Enter email');
return false;
}
if(email.indexOf('school1.com') !== -1)
{
document.getElementById("form_action").action ="school1.com";
document.getElementById('form_action').submit();
} else {
document.getElementById("form_action").action ="school2.com";
document.getElementById('form_action').submit();
}
}
</script>
you want to answer using javascript so this is javascipt answer
The first problem is that you have no form ID, so your document.getElementByID has nothing to target. Let's first give it an id emailform:
<form id="emailform" name="form" method="post" action="">
Then you need to run the validity check on change:
document.getElementById('email').onchange = function() {
var allowedDomains = ['school1.com', 'school2.com', 'school3.com'];
if ($.inArray(this.value, allowedDomains) !== -1) {
//acceptable
}
}
Then you can simply update the form with jQuery, setting the action attribute:
document.getElementById('email').onchange = function() {
var allowedDomains = ['school1.com', 'school2.com', 'school3.com'];
if ($.inArray(this.value, allowedDomains) !== -1) {
var action = '/'+this.value;
$("#emailform").attr("action", action);
}
}
Hope this helps! :)

Show alert (Text Field is empty) on submit Html/JavaScript

How to get an Alert on Submit when I left a TextBox empty And It Should Turn To the Next page on submit.
Must Reply,
Thank You.
You can try this :
HTML :
<form action="" method="POST" id="myForm">
<input id="myInput" type="text" />
<input type="submit" />
</form>
(Replace the action attribute by the url of your destination page, the one you call the "next page").
JS (without jQuery):
var myForm = document.querySelector('#myForm');
var myInput = document.querySelector('#myInput');
myForm.addEventListener('submit', function(pEvent) {
if(myInput.value === '') {
pEvent.preventDefault(); //Prevents the form to be sent
alert('Ho! Stop!');
//Do whatever you want
}
});
JS (with jQuery) :
var myForm = $('#myForm');
var myInput = $('#myInput');
myForm.on('submit', function(pEvent) {
if(myInput.val() === '') {
pEvent.preventDefault(); //Prevents the form to be sent
alert('Ho! Stop!');
}
});
Demo : http://jsfiddle.net/af9qvkmp/9/
Here is the demo, based on jQuery!
HTML
<form action="" method="POST" id="form">
<input id="input1" type="text" />
<input id="input2" type="text" />
<input id="input3" type="text" />
<input id="input4" type="text" />
<input id="input5" type="text" />
<input type="submit" />
</form>
JS
$(function() {
$('#form').on('submit', function(event) {
var isError = false;
$(this).find('input[type="text"]').each(function() {
if($(this).val() == '') {
console.log($(this));
isError = true;
return false;
}
});
if(isError) {
event.preventDefault();
alert("Got Error");
} else {
// Submit the form
}
});
});
In form tag write
<form action="" method="post" enctype="multipart/form-data" onsubmit="return checkform(this);">
This is your input field
<input type="text" name="reviewValue" value="" id='starRate2' required>
Javascript Code:
<script language="JavaScript" type="text/javascript">
function checkform ( form ){
if (form.reviewValue.value == "") {
alert( "Please choice your Rating." );
form.reviewValue.focus();
return false ;
}
return true ;
}
</script>

After Javascript Validation page redirect to another page

i have tryed to validate textbox using javascript.when i click on the submit button without inserting values to textbox it's display alert box.but after click on "ok" button , page redirect to payments.php page.how to fix it
<form method="post" action="payments.php" >
First Name : <br />
<input name="name" type="text" class="ed" id="name" /> <br />
E-mail : <br />
<input name="email" type="text" class="ed" id="email" /> <br />
<input name="but" type="submit" value="Confirm" onclick="Validation()" />
</form>
function Validation()
{
if (checkFName()&&checkemail())
{
window.event.returnValue = false;
}
}
function checkFName()
{
var tname = document.getElementById("name").value;
if((tname == null)||(tname == ""))
{
alert("Please Enter your First name");
return false;
}
return true;
}
function checkemail()
{
var email = document.getElementById("email").value;
var ap = email.indexOf("#");
var dp = email.lastIndexOf(".");
if((ap < 1)||(dp-ap < 1)||(dp >= email.length-1))
{
alert("invalid email address");
return false;
}
else
return true;
}
You need to change the CONFIRM button type to "button":
<input name="but" type="button" value="Confirm" onclick="Validation()" />
Give your form a name:
<form name="frm" method="post" action="payments.php">
then in your Validation() function, if your form passes validation, you can do the following:
function Validation()
{
if (checkFName()&&checkemail())
{
document.forms["frm"].submit();
}
}

Validation through getElementById()

I'm been trying to validate my fields by using 'getElementById()' with '.value'. However, it seems like either getElementById.value is not working or some codes has overlap the function.
Updated Javascript function:
function validate() {
var Name = document.getElementById('Name').value;
var Tel = document.getElementById('Tel').value;
var FaxNo = document.getElementById('FaxNo').value;
if (Name != "") //wanted to check for alphabets only.
{
alert("Correct");
return true; //doesnt go to next.php
}
else
{
alert("Don leave blank!")
return false;
}
if (isNaN(Tel)) //check only numbers. Same code for FaxNo.
{
alert("Correct");
return true; //doesnt go to next.php
}
else
{
alert("invalid");
return false
}
return true; //doesn't go to next.php
}
My Form:
<Form action ="next.php" method="post">
<input name="Name" type="text" id="Name" value=""/>
<input name="Tel" type="text" id="Tel" value=""/>
<input name="FaxNo" type="text" id="FaxNo" value=""/>
<input type="submit" name="submit" onclick="return validate();"/>
</Form>
I have already defined my onclick function to my Javascript and tried to add return false too. But the alert still cant appear. Kindly advise.
Your markup is invalid:
<input name="Name" type="text" id="Name" " value=""/>
^-----------should be removed
so correction would be removing all extra " characters:
<input name="Name" type="text" id="Name" value=""/>
<input name="Name" type="text" id="Name" value=""/>
<input name="Tel" type="text" id="Tel" value=""/>
<input name="FaxNo" type="text" id="FaxNo" value=""/>
For preventing submition,when input is invalid, you can try something like a:
function validate() {
var Name = document.getElementById('Name').value;
var Tel = document.getElementById('Tel').value;
var FaxNo = document.getElementById('FaxNo').value;
if (Name != "") //wanted to check for alphabets only.
alert("Correct")
else {
alert("Don leave blank!")
return false;
}
if (isNumeric(Tel)) //check only numbers. Same code for FaxNo.
alert("Correct")
else {
alert("invalid");
return false;
}
}
//Borrowed from jQuery lib
function isNumeric( obj ){
return !isNaN( parseFloat(obj) ) && isFinite( obj )
}
<input type="submit" name="submit" onclick="return validate()"/>
Try this,
function validate() {
var Name = document.getElementById('Name').value;
var Tel = document.getElementById('Tel').value;
var FaxNo = document.getElementById('FaxNo').value;
if (Name != "") {}
else {alert("Don leave blank!"); return false;}
if (isNaN(Tel)){ alert("invalid"); return false;}
else { }
return true;
}
Your HTML submit button code should be
<input type="submit" name="submit" onclick="return validate()"/>
Use return false to prevent submitting form in case of any validation errors.

Categories

Resources