Javascript: Validation alerts - javascript

what i need to do is the following:
Alert 'empty field' if name OR email is empty
Alert 'bad email' if email does not contain a #
Alert 'success' if both name and email is filled in correctly
function test10(email, name){
if(email=="") {
alert("empty field");}
else if(email.indexOf("#")<0){
alert("bad email");}
if(name=="") {
alert("empty field");}
}
This is what i've come up with so far, i want to keep it as simple as possible. Now how would i in this same vein make it say "success" when both are filled in? I need to do it purely in javascript.
It's probably worth mentioning that i'm very new to javascript so keep the insults to yourselves if you think this is stupid, i'm just trying to learn here.

Try this:
function test10(email, name){
// The || is a boolean "OR" , so if (email equals "") OR (name equals "")
// then alert the failure reason.
if(email=="" || name == "") {
alert("empty field");
return false;
}
if(email.indexOf("#") == -1){
alert("bad email");
return false;
}
//Conditions are met.
alert("Succes!");
return true;
}
This works exactly as you specified.

Try this
function test10(email, name){
if(email=="" || name=="") {
alert("empty field");}
else if(email.indexOf("#")<0){
alert("bad email");}
else{
alert("success");}
}

Either you put a final else clause at the end of your function and alert the success message from there, or you could return from the function whenever you hit an error, making sure to stop the function from continue running when it run into an invalid input. You could then have an alert at the end of the function that says success, since you will never get to that point as longs as you still have errors in the input.
Something like this:
function test10(email, name){
if (email === "" || name === "") {
alert("empty field");
return false;
}
if(email.indexOf("#")<0){
alert("bad email");
return false;
}
// If we get here, the input is all good!
alert("success");
return true;
}
Like this you will only alert the user about one error at a time, giving her time to fix that error, instead of throwing up three alerts after each other, if non of your rules are met.
Returning false/true from the function has the benefit that the function then can be used to stop a form submission if the input is invalid.
Alternative validation method
With HTML5, data form validation was introduced, providing a native option for validation using attributes like required and pattern. Browsers can also perform validation on email input if you use the new <input type="email">
More extensive reading on this is available at MDN.

Just add a return statement in each of the wrong cases
function test10(email, name)
{
if(email=="") {
alert("empty field");
return false;
}
if(email.indexOf("#")<0){
alert("bad email");
return false;
}
if(name=="") {
alert("empty field");
return false;
}
alert("success");
return true;
}
Note: you need to add in the form event onsubmit="return test10(email,name);"

Related

How to style Validation checking before "save"

This is just a best practice question that I have run into and can't find the answer for. Any input is welcome! (Backed up responses with data/research would be amazing)
Example Save Button
When my save button is pressed, I want to do some validation, name (must be first and last), age (must be from 0 - 125), email (valid email address) and if these are all true, I want to "save" the user (to a db or wherever doesn't matter)
Right now my functions are set up
// Global error handler for example
var errors = {};
// Save Button Function
saveButton = function(dataModel) {
var valid = true;
valid = validateName(valid, dataModel.name);
valid = validateAge(valid, dataModel.age, 'extraParam');
valid = validateEmail(valid, dataModel.email, 'secondParam', 'thirdParam');
valid = (dataModel.red) ? validateRedUser(valid, dataModel) : valid;
if (valid) {
// Save user to database
}
else {
// alert to user an error has occured
// user errors object to respond with the errors
}
}
I feel like passing around the valid state to each sub validation function is not the best approach to a problem like this. It works, but can it be improved?
Edit: A sub-validation function would look something like:
validateName = function(valid, dataModel.name) {
if (!dataModel.name) {
valid = false;
// access global error handler to save error
errors.name = 'error in the name';
}
return valid;
}
Taking your sample function added the valid state condition check.
validateName = function(valid, dataModel.name) {
if (!dataModel.name && valid) {
valid = false;
// access global error handler to save error
errors.name = 'error in the name';
}
return valid;
}

JQuery/AJAX form validation with nested testing...elegant solution?

I'm performing form validation using JQuery/AJAX. When an entry is missing or malformed, I want to send a message via alert() and return the user to the form with all fields as they were so the user can edit them and try submitting the form again. I also don't want the user to get a series of alert() boxes for each field that is malformed, but rather the first field that is discovered to be malformed should issue an alert() box; upon clicking the alert() box, the user may then return to editing the form. If there are 6 malformed fields, I don't want a series of 6 consecutive alert() boxes, but rather just the first one discovered by the routine to be errant and a return to the form (eventually the user will get them all right).
I have utilized a method that works, although it's not elegant and rather tedious to edit and error-prone...it's like a series of Russian dolls, where the first error prevents the successive routines from being run. When there are 5 fields or fields that require multiple kinds of integrity checking, the number of nested IF-ELSE statements increases exponentially, and for forms where I'm passing data via GET to a PHP file, like this:
$.get('admin_email_length_check.php', { new_email: $('#new_email').val(), max_email_length: max_email_length }, function(data) {
if (data != 0) {
alert(data);
} else {
...it has to be closed out with:
}
});
...not just a simple:
}
But here's a short routine for a 2 field validation. I set allow_submit to FALSE and prevent submission until all integrity checks are passed, at which point allow_submit becomes TRUE and I dynamically re-submit the form; this means that the integrity check (and its e.preventDefault();) will be bypassed entirely and the form will then be processed. Again, it works, but the kind of IF-ELSE structures I need to construct for forms with many fields that require many types of form validation requires extremely LONG structures with carefully edited closing braces (or braces + parentheses + ;, etc.) Is there a shorter or more elegant way to do this?:
var allow_submit = false;
$('#change_password_form').on('submit', function(e) {
if (!allow_submit) {
e.preventDefault();
// First ensure that at least one of the fields has a value:
if (($('#new_password').val() == '') && ($('#retype_password').val() == '')) {
alert("Nothing specified in either of the 'Change Password' fields.\n\nAdd data and re-submit.\n");
} else {
// Ensure both fields are filled:
if (($('#new_password').val() == '') || ($('#retype_password').val() == '')) {
alert("When changing your password, both the 'New Password' and the 'Retype Password' fields must be filled.\n\nPlease supply new, matching passwords in both fields and re-submit.\n");
} else {
// Do the two fields match?
if ($('#new_password').val() != $('#retype_password').val()) {
alert("New Password fields do not match.\n\nPlease edit password fields and re-submit.\n");
} else {
allow_submit = true;
$('#change_password_form').submit();
}
}
}
}
});
I have two suggestions:
Use early return statements to de-nest your code a bit.
Whenever you have too much conditional logic, try to use a data structure instead. See this quote by Linus Torvalds.
Here is my attempt:
$('#change_password_form').on('submit', function(e) {
var data = collect_data();
if (!data_is_valid(data)) {
e.preventDefault();
} else {
// Submit.
}
});
function collect_data() {
return {
passwords {
new_: $('#new_password').val(),
retyped: $('#retype_password').val()
},
...
};
}
function data_is_valid(data) {
if (!password_is_valid(data.passwords)) {
return false;
}
...
return true;
}
function password_is_valid(passwords) {
for (var i = 0; i < password_validators.length; i++) {
var validator = password_validators[i];
if (!validator.fails(passwords)) {
alert(validator.message);
return false;
}
}
return true;
}
var password_validators = [
{
fails: function(passwords) {
return passwords.new_ === '' && passwords.retyped === '';
},
message: 'No password provided'
},
{
fails: function(passwords) {
return passwords.new_ !== .passwordsretyped;
},
message: 'Passwords do not match'
},
...
];

looping the local storage

I want to loop the local storage for the password and username to check if correct and alert a message if or if not.
The code is working well, but I don't know where to write the "invalid username" message because the loop goes through every record, so the messages pops ups for every record check until it finds it.
What I want is to pop up the message when the search is done.
Here is my code:
$("#login").click(function(){
var username =$("#user").val();
var password =$("#pass").val();
var userCount = localStorage.getItem('userCount');
for (i=1;i<=userCount;i++) {
var user = JSON.parse(localStorage.getItem("user" + i));
if((user.username == username)||(user.password == password)){
alert("welcome "+username);
} else {
alert("Invalid Username");//this message keeps poping up on every record until username found
}
}
});
Put the loop inside a function.
Return true (or the user object) from that function if anything inside the loop matched.
Return false after the loop (which you'll only reach if nothing matches).
Handle your alert outside the function based on the return value of calling it.
Set a boolean variable to true when you find a match, and stop the loop using break. Otherwise, if the boolean is still false after the loop completes, no match was found.
$("#login").click(function(){
var username =$("#user").val();
var password =$("#pass").val();
var userCount = localStorage.getItem('userCount');
var foundOne = false;
for (i=1;i<=userCount;i++) {
var user = JSON.parse(localStorage.getItem("user" + i));
if((user.username == username)&&(user.password == password)){
foundOne = true;
break;
}
}
if(foundOne) {
alert("welcome "+username);
// other "welcome" code
} else {
alert("Invalid Username");
}
});
NB, you may want to use the && operator instead of || here:
(user.username == username)&&(user.password == password)
otherwise you may get a match for one user who has the same password as another.

JavaScript / AJAX / Servlet compare Strings

I am trying to compare a string that is returned from servlet
Servlet page returns this:
out.println("pass");
JavaScript:
function Return() {
if (ajax.responseText === "pass") {
document.getElementById("pass").innerHTML = "This is valid number!";}
Now I have output the ("ajax.responseText") and it returns "pass" but I can't still validate it in the IF statement.
I tried using (.equal("pass") i tried with == and I even tried "var value = ajax.responseText; and then tried value === "pass")
Yes I also tried .toString()..
It just never validates it correctly it always goes to ELSE statement...
println usually appends a line break at the end of the string (the "ln" in println stands for "line") and thus the string value returned by the server is actually "print\n" (or something similar), which is not equal to "pass".
If available, use
out.print("pass");
which doesn't append a line break.
Or trim the response before comparison.
Instead of your original function Return (which doesn't explicitly return)
function Return() { // Why not checkPassword?
if (ajax.responseText === "pass") { // exactly equal
document.getElementById("pass").innerHTML = "This is valid number!";
}
}
Try something like this (e.g. presumably it should be true or false, so do so explicitly)...
function checkPassword() { // probably should pass arguments what the function does.
if (ajax.responseText.trim() == "pass") { // trim the response string
// ('pass\n' != 'pass')
console.log('Got a match!'); // Try logging it.
document.getElementById("pass").innerHTML = "This is valid number!";
return true; // return a value?
} else {
// Again, I would try adding some debug logging.
console.log('Did not match! ' + ajax.responseText);
}
return false; // default to false.
}

javaScript form validation with multiple forms

I have two forms on different pages of my website, however I want to re-use the javaScript validation. So for example:
function notnull() {
var firstName = document.forms["newsletter"]["firstName"].value;
if (firstName === null || firstName === "") {
inlineMsg('firstName', 'You must enter your name.', 3000000);
return false;
} else {
return true;
}
}
This code is only good for my newsletter form (e.g. document.forms["newsletter"]["firstName"].value) but I want to use it for my "contact" form too.
Can I build the variables up dynamically like document.forms[][].value?
You can change your notnull function to accept 2 parameters
function notnull(formType,fieldName){
var fieldName = document.forms[formType][fieldName].value;
if(fieldName === null || fieldName === "") {
inlineMsg(fieldName, 'You must enter your '+fieldName,3000000);
return false;
} else
return true;
}
something along that line. I'm unsure what your inlineMsg does. You can also alternatively pass in the error friendly name for your error message into the function.
I'm sure there are better approach of handling the above, but looking at your code only, that's what I would suggest.

Categories