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
Related
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
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??
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(", "));
My goal is this:
Check if email and name are empty. If so, give 'Enter email or name' alert.
If they do, check for an # in email If none is found, give 'Bad email' alert.
Check if email and name contain any letters, if they do, give 'Success' alert
function test(email, name){
if(email=="" || name == "") {
alert("Enter mail or name");}
return false;
if(email.indexOf("#") == -1){
alert("Bad email");}
return false;
var a = email.length;
var b = name.length;
if(a==>0, b==>0){
alert("Message sent");}
return true;
}
This is what I've come up with so far, but it isn't working. I'm quite new at javascript so maybe you guys could tell me what I've done wrong?
The problem you're having is the close bracket is in the wrong place. You have it at the end of your alert statement and you probably want the return to be included with your if statement. if this is the case then change it to be:
function test(email, name){
if(email=="" || name == "") {
alert("Enter mail or name");
return false;
}
if(email.indexOf("#") == -1){
alert("Bad email");
return false;
}
var a = email.length;
var b = name.length;
if(a > 0 && b > 0){
alert("Message sent");
return true;
}
}
A better way to do the same thing would be because that way you're not checking the variables for length and size twice:
function test(email, name) {
var a = email.length;
var b = name.length;
if ( a > 0 && b > 0 ) {
// ignore 0 because email addresses shouldn't start with #
if ( email.indexOf("#") > 0 ) {
alert("Message sent");
return true;
}
else {
alert("Bad email");
return false;
}
}
else {
alert("Enter mail or name");
return false;
}
}
Try this JSFiddle that seems to fit your needs http://jsfiddle.net/9nF5W/
function test(email, name) {
if (email == "" || name == "") {
alert("Enter mail or name");
return false;
}
if (email.indexOf("#") == -1) {
alert("Bad email");
return false;
}
var a = email.length;
var b = name.length;
if (a > 0 && b > 0) {
alert("Message sent");
}
return true;
}
test('tes#t', 'test');
I think there is an other mistake than the returns statements in "if(a==>0, b==>0){" by the way.
I have a jquery password live validation form HERE
This example guides to add proper password and show with red and green sign.
But I am wanting something like when all the conditions of password are successful then popup tool tip will automatically disappear.
How can this possible. I am not good at jquery, any help will be much appreciated.
live JS fiddle link
JS
$(document).ready(function() {
$('input[type=password]').keyup(function() {
// set password variable
var pswd = $(this).val();
if ( pswd.length < 8 ) {
$('#length').removeClass('valid').addClass('invalid');
} else {
$('#length').removeClass('invalid').addClass('valid');
}
//validate letter
if ( pswd.match(/[A-z]/) ) {
$('#letter').removeClass('invalid').addClass('valid');
} else {
$('#letter').removeClass('valid').addClass('invalid');
}
//validate capital letter
if ( pswd.match(/[A-Z]/) ) {
$('#capital').removeClass('invalid').addClass('valid');
} else {
$('#capital').removeClass('valid').addClass('invalid');
}
//validate number
if ( pswd.match(/\d/) ) {
$('#number').removeClass('invalid').addClass('valid');
} else {
$('#number').removeClass('valid').addClass('invalid');
}
});
$('input[type=password]').focus(function() {
// focus code here
});
$('input[type=password]').blur(function() {
// blur code here
});
$('input[type=password]').keyup(function() {
// keyup code here
}).focus(function() {
$('#pswd_info').show();
}).blur(function() {
$('#pswd_info').hide();
});
});
One way would be to count the number of valid rules and when you reach the appropriate number, fade the rules out:
if ($('#pswd_info li.valid').length == 4) $('#pswd_info').fadeOut();
jsFiddle example
This will work inside of your keyup() function:
if(pswd.length >= 8 && pswd.match(/[A-z]/) && pswd.match(/\d/)) {
$('#pswd_info').hide();
}
Updated JSFiddle
Here is a working version (jsfiddle):
$(document).ready(function() {
$('input[type=password]').keyup(function() {
var isValid = true;
// set password variable
var pswd = $(this).val();
if ( pswd.length < 8 ) {
isValid &= false;
$('#length').removeClass('valid').addClass('invalid');
} else {
isValid &= true;
$('#length').removeClass('invalid').addClass('valid');
}
//validate letter
if ( pswd.match(/[A-z]/) ) {
isValid &= true;
$('#letter').removeClass('invalid').addClass('valid');
} else {
isValid &= false;
$('#letter').removeClass('valid').addClass('invalid');
}
//validate capital letter
if ( pswd.match(/[A-Z]/) ) {
isValid &= true;
$('#capital').removeClass('invalid').addClass('valid');
} else {
isValid &= false;
$('#capital').removeClass('valid').addClass('invalid');
}
//validate number
if ( pswd.match(/\d/) ) {
isValid &= true;
$('#number').removeClass('invalid').addClass('valid');
} else {
isValid &= false;
$('#number').removeClass('valid').addClass('invalid');
}
if(isValid){
$('#pswd_info').hide();
}
});
$('input[type=password]').focus(function() {
// focus code here
});
$('input[type=password]').blur(function() {
// blur code here
});
$('input[type=password]').keyup(function() {
// keyup code here
}).focus(function() {
$('#pswd_info').show();
}).blur(function() {
$('#pswd_info').hide();
});
});