JavaScript Validation Registration Form - javascript

The validateForm function works. And the validateEmail function works as well but separately. How do I incorporate the data validation for the email in the validateForm function? In other words, how do I get the form to return false for when the fields are empty and requirements are not met?
function validateForm() {
if( document.myForm.userName.value == "" ) {
alert( "Please provide your name!" );
document.myForm.userName.focus() ;
return false;
}
if( document.myForm.email.value == "" ) {
alert( "Please provide your Email!" );
document.myForm.email.focus() ;
return false;
}
return( true );
}
function validateEmail() {
var emailID = document.myForm.email.value;
atpos = emailID.indexOf("#");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 )) {
alert("Please enter correct email ID")
document.myForm.email.focus() ;
return false;
}
return( true );
}

You just have to merge your code into one function
function validateForm() {
var emailID = document.myForm.email.value;
atpos = emailID.indexOf("#");
dotpos = emailID.lastIndexOf(".");
if( document.myForm.userName.value == "" ) {
alert( "Please provide your name!" );
document.myForm.userName.focus() ;
return false;
}
if( document.myForm.email.value == "" ) {
alert( "Please provide your Email!" );
document.myForm.email.focus() ;
return false;
}
if (atpos < 1 || ( dotpos - atpos < 2 )) {
alert("Please enter correct email ID")
document.myForm.email.focus() ;
return false;
}
return true;
}

just called validateEmail inside validateForm like this :
function validateForm() {
if( document.myForm.userName.value == "" ) {
alert( "Please provide your name!" );
document.myForm.userName.focus() ;
return false;
}
if( document.myForm.email.value == "" ) {
alert( "Please provide your Email!" );
document.myForm.email.focus() ;
return false;
}
return validateEmail();
}
function validateEmail() {
var emailID = document.myForm.email.value;
atpos = emailID.indexOf("#");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 )) {
alert("Please enter correct email ID")
document.myForm.email.focus() ;
return false;
}
return( true );
}
or u can u merge those function into like answer from #Addis

Related

each textbox validation in script

This is my script, I want to create alert when field is empty then display the alert on screen when enter key is pressed. I want the script which including when I write in the textbox and press enter then verify that keyword and go to next textbox.
<script type="text/javascript">
function validate()
{
var letters = /^[A-Za-z]+$/;
if( document.myForm.vname.value == "" )
{
alert( "Please provide your Vehicle Name!" );
document.myForm.vname.focus();
return false;
}
else if (document.myForm.vname.value.length > 15)
{
alert("Vehicle name cannot be more than 15 characters");
document.myForm.vname.focus() ;
return false;
}
else if(!document.myForm.vname.value.match(letters))
{
alert("Enter Only Characters ");
document.myForm.vname.focus() ;
return false;
}
if( document.myForm.usage.value == "" )
{
alert( "Please provide your Vehicle Usage!" );
document.myForm.usage.focus() ;
return false;
}
if( document.myForm.vtype.value == 0 )
{
alert( "Please provide your Vehicle Type!" );
document.myForm.vtype.focus() ;
return false;
}
if( document.myForm.vmodelno.value == "" )
{
alert( "Please provide your Model No!" );
document.myForm.vmodelno.focus() ;
return false;
}
if( document.myForm.ftype.value == 0 )
{
alert( "Please provide your Fuel Type!" );
document.myForm.ftype.focus() ;
return false;
}
if( document.myForm.cmp.value == "" )
{
alert( "Please provide your Company Name!" );
document.myForm.cmp.focus() ;
return false;
}
return( true );
}
</script>
on pressing enter form will get submitted.
instead you can call when focus is out for every input field. like:
$("#myfield").blur(function(){
----
});
This code work with Jquery

I am trying to validate a form with more than one function, but it only calls the last one even if i combine them with a comma

I am having a problem validating a form. When it submits it just runs the last function. When i try to combine them with a comma then it just runs them all consecutively. Here is my code:
<script type= "text/javascript">
function validateForm() {
var x = document.forms["myForm"]["name"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
}
}
function validateForm() {
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("#");
var dotpos = x.lastIndexOf(".");
if (atpos< 1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Not a valid e-mail address");
return false;
}
}
function validateForm() {
var x = document.forms["myForm"]["message"].value;
if (x == null || x == "") {
alert("Please Send Us a Message");
return false;
}
}
</script>
JavaScript doesn't handle redeclaring functions with the same name.
What is wrong with:
function validateForm() {
// x is a bad name for the variable.
var x = document.forms["myForm"]["name"].value;
// x can never be null, BTW.
if (x === "") {
alert("Name must be filled out");
return false;
}
x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("#");
var dotpos = x.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
alert("Not a valid e-mail address");
return false;
}
x = document.forms["myForm"]["message"].value;
if (x === "") {
alert("Please Send Us a Message");
return false;
}
}
Don't name your functions with the same name! You can call them validateName, validateEmail and validateMessage.
When you declare functions with the same name, the previous functions will be overriden by the last one.
If you want to call one function in onsubmit, you can set onsubmit=validteForm() and declare validateForm as:
function validateForm() {
validateName();
validateEmail();
validateMessage();
}
You are trying to have more than one value in one variable, which is not possible. The value you are defining will overwrite the definition which is already there. Change your function names.
Do it like bellow
<script>
function fun1 () {
alert('in first')
}
function fun2 () {
alert('in Second')
}
function fun3 () {
alert('in third')
}
</script>
call them like bellow onsubmit of form
<form action="" onsubmit="fun1();fun2();fun3();">
<input type="submit" value="click">
</form>
Another solution; you can modify your function(s) to a simple one, like following
function validateForm(){
var x, atpos, dotpos;
x = document.forms["myForm"]["name"].value;
if(!x){
alert("Name must be filled out");
return false;
}
x = document.forms["myForm"]["email"].value;
atpos = x.indexOf("#");
dotpos = x.lastIndexOf(".");
if(atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length){
alert("Not a valid e-mail address");
return false;
}
x = document.forms["myForm"]["message"].value;
if(!x){
alert("Please Send Us a Message");
return false;
}
return true;
}

Javascript Form Validation Works in Chrome but not IE or Firefox

I have written a client-side form validation script for a registration form that works great in Google Chrome but won't validate in Firefox or Internet Explorer??
Here is the entire script:
<!--- Registration Form Validation --->
<script type="text/javascript">
//Validate radio buttons
function checkRadioArray(radioButtons){
for (var k=0; k < radioButtons.length; k++) {
if (radioButtons[k].checked) {
return true;
}
}
return false;
}
//Initialize error messages
function reportErrors(errors) {
var msg = "There were some problems with your form submission. Please correct the errors listed below \n";
var numError;
for (var j=0; j<errors.length; j++) {
numError = j +1;
msg += "\n" + numError + ". " + errors[j];
}
alert(msg);
}
//Validate text fields
function checkLength(text, min, max){
min = min || 1;
max = max || 10000;
if (text.length < min || text.length > max) {
return false;
}
return true;
}
//Validate select menus
function checkSelect(select){
return (select.selectedIndex > 0);
}
//Validate Registration Form
function validate(form){
//Set Variables
var errors = [];
var roommate = form.Roommate.value;
var room = form.Room.value;
var SatSess = form.SatSess.value;
var SunSess = form.SunSess.value;
if ( !checkRadioArray(form.RegType) ) {
errors[errors.length] = "Please select your registration type."
}
if ( !checkRadioArray(form.FirstTimer) ) {
errors[errors.length] = "Please indicate if this is your first time attending this conference.";
}
if ( !checkRadioArray(form.Tshirt) ) {
errors[errors.length] = "Please indicate your Tshirt size.";
}
if ( !checkRadioArray(form.Room) ) {
errors[errors.length] = "Please indicate your room choice.";
}
if (room == "Double") {
if ( !checkLength(roommate) ) {
errors.push("You selected a double room, please indicate a roommate.");
}
}
if (SatSess != "off") {
if( !checkSelect(form.Sess1_1) ) {
errors[errors.length] = "Please indicate your first choice for Session 1.";
}
}
if (SatSess != "off") {
if ( !checkSelect(form.Sess1_2) ) {
errors[errors.length] = "Please indicate your second choice for Session 1.";
}
}
if (SatSess != "off") {
if( !checkSelect(form.Sess2_1) ) {
errors[errors.length] = "Please indicate your first choice for Session 2.";
}
}
if (SatSess != "off") {
if ( !checkSelect(form.Sess2_2) ) {
errors[errors.length] = "Please indicate your second choice for Session 2.";
}
}
if (SatSess != "off") {
if( !checkSelect(form.Sess3_1) ) {
errors[errors.length] = "Please indicate your first choice for Session 3.";
}
}
if (SatSess != "off") {
if ( !checkSelect(form.Sess3_2) ) {
errors[errors.length] = "Please indicate your second choice for Session 3.";
}
}
if (SatSess != "off") {
if( !checkSelect(form.Sess4_1) ) {
errors[errors.length] = "Please indicate your first choice for Session 4.";
}
}
if (SatSess != "off") {
if ( !checkSelect(form.Sess4_2) ) {
errors[errors.length] = "Please indicate your second choice for Session 4.";
}
}
if (SunSess != "off") {
if ( !checkSelect(form.Sess5_1) ) {
errors[errors.length] = "Please indicate your first choice for Session 5.";
}
}
if (SunSess != "off") {
if ( !checkSelect(form.Sess5_2) ) {
errors[errors.length] = "Please indicate your second choice for Session 5.";
}
}
if (SunSess != "off") {
if ( !checkSelect(form.Sess6_1) ) {
errors[errors.length] = "Please indicate your first choice for Session 6.";
}
}
if (SunSess != "off") {
if ( !checkSelect(form.Sess6_2) ) {
errors[errors.length] = "Please indicate your first choice for Session 6.";
}
}
if (errors.length > 0) {
reportErrors(errors);
return false;
}
return true;
}
</script>
<!--- End Registration Form Validation --->
For some reason the if statements.....if (SatSess != "off") and if (SunSess != "off") won't validate as true in Firefox or IE but they will in Chrome?? I had the same issue when when I try.... if (room == "Double").
What am I doing wrong??

Only one alert box, instead of more

It's maybe a stupid question, but it's my first year working with something like javascript.
I got some alert boxes, and I was wondering if there any possiblility to show only one alert box (in javascript) with all the stuff I want them to do.
And when they fill in one of the inputs or buttons, that the allert will only show the other missing things.
(I'm getting an alert of the first code. When I fill it in I get an alert of the next code, and so on. I want to have all in one.)
/*validate name*/
var n=document.forms["check"]["name"].value;
if(n==null||n=="")
{
alert("Please, fill in your name.");
return false;
}
/*validate the sex*/
if(document.getElementById('male').checked)
{
}
else if(document.getElementById('female').checked)
{
}
else
{
alert("Please, enter your gender.");
return false;
}
/*validate the E-mail*/
var e=document.forms["check"]["email"].value;
var atpos=e.indexOf("#");
var dotpos=e.lastIndexOf(".");
if(e==null||e=="")
{
alert("Please, fill in your e-mail.");
return false;
}
if(atpos<1 || dotpos<atpos+2 || dotpos+2>=e.length)
{
alert("This isn't a valid e-mail address.");
return false;
}
/*validate agreement*/
if(document.getElementById("I don't want my information to be part of this website.").checked)
{
}
else if(document.getElementById("I wish to be registered.").checked)
{
}
else if(document.getElementById("I wish to get the new content of this website.").checked)
{
}
else
{
alert("Please, tell us what we can do with your information.");
return false;
}
/*validate the terms*/
if(document.getElementById("yes").checked)
{
}
else if(document.getElementById("no").checked)
{
alert("You have to agree with the terms.");
return false;
}
else
{
alert("Please, enter the terms.");
return false;
}
// initialise an array to populate along the way
var alerts = [];
/*validate name*/
var n = document.forms[ "check" ][ "name" ].value;
if ( n == null || n == "" ) {
// push message onto the array
alerts.push( "Please, fill in your name." );
return false;
}
/*validate the sex*/
if ( document.getElementById( 'male' ).checked ) {} else if ( document.getElementById( 'female' ).checked ) {} else {
// push message onto the array
alerts.push( "Please, enter your gender." );
return false;
}
/*validate the E-mail*/
var e = document.forms[ "check" ][ "email" ].value;
var atpos = e.indexOf( "#" );
var dotpos = e.lastIndexOf( "." );
if ( e == null || e == "" ) {
// push message onto the array
alerts.push( "Please, fill in your e-mail." );
return false;
}
if ( atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= e.length ) {
// push message onto the array
alerts.push( "This isn't a valid e-mail address." );
return false;
}
// join up the array of messages, and alert the user...
alert(alerts.join(", "));
In summary...
// initialise an array to populate along the way
var alerts = [];
...
// push messages onto the array
// (repeat this step for all messages)
alerts.push( "Any validation message" );
...
// join up the array of messages, and alert the user...
alert(alerts.join(", "));

JS Form Validation - Submit Button does nothing

I'm trying to validate my form, and the first alert works. But then when the user fills in correct data and clicks submit, the form does not submit anymore. Any help is appreciated, thanks!
<form name="register" action="register.php" onsubmit="return validateForm()" method="post">
// form stuff
function validateForm() {
if (!checkName() || !checkEmail()) {
return false;
} else {
return true;
}
}
function checkName() {
var name=document.forms["register"]["name"].value;
if (name==null || name=="") {
alert("Please fill out your name");
return false;
}
}
function checkEmail() {
var email=document.forms["register"]["email"].value;
var atpos=email.indexOf("#");
var dotpos=email.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
alert("Not a valid e-mail address");
return false;
}
}
You need checkEmail and checkName to return true when the email or name is present. What you've got now returns undefined.
Here is a fiddle showing the solution and here are the two functions rewritten:
function checkName() {
var name = document.forms["register"]["name"].value;
if (name == null || name == "") {
alert("Please fill out your name");
return false;
}
return true;
}
function checkEmail() {
var email = document.forms["register"]["email"].value;
var atpos = email.indexOf("#");
var dotpos = email.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {
alert("Not a valid e-mail address");
return false;
}
return true;
}
I do ultimately think you'll be happier if you wind up going to jQuery Validation, though.

Categories