We Keep Coding

Fail message does not appear in form validation event

I am trying to make a fail message which adds together different strings depending on the error on submit. However the fail message will not appear though the conditions are met.
I would like to know where is the error in my code. Thank you.
This is in an external JavaScript file which is linked to the HTML document.
function validationEvent() {
var flag = true;
var alertmsg = "There were errors found in your registration:";
var givenname = document.getElementById("gname").value;
var surname = document.getElementById("sname").value;
var address = document.getElementById("address1").value;
var city = document.getElementById("city").value;
var pcode = document.getElementById("pcode").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;
var cnum = document.getElementById("cnum").value;
if (givenname == null || givenname == "") {
alertmsg += " Given Name is a mandatory field.";
flag = false;
}
if (surname == null || surname == "") {
alertmsg += " Surname is a mandatory field.";
flag = false;
}
if (address == null || address == "") {
alertmsg += " Address is a mandatory field.";
flag = false;
}
if (city == null || city == "") {
alertmsg += " City is a mandatory field.";
flag = false;
}
if (pcode == null || pcode == "") {
alertmsg += " Postal Code is a mandatory field.";
flag = false;
}
if (email == null || email == "") {
alertmsg += " Email is a mandatory field.";
flag = false;
}
if (phone == null || phone == "") {
alertmsg += " Phone Number is a mandatory field.";
flag = false;
}
if (cnum == null || cnum == "") {
alertmsg += " Credit Card Number is a mandatory field.";
flag = false;
}
if (!vormCredit()) {
alertmsg += " Visa Cards must start with 4 and Mastercard Cards must start with 5.";
flag = false;
}
if (!stateCheck()) {
alertmsg += " Invalid Postal Code.";
flag = false;
}
if (!checkCredit()) {
alertmsg += " Invaid Credit Card Number.";
flag = false;
}
if (!flag) {
alert(alertmsg);
return false;}
else {
alert("Thank you for your subcription.");
return true;}
};
Edit: Removed 'return false' from the 'if' loops and added it only to the if(!flag) loop.

It's better to use the switch statement here. It handles the situation when you have more cases. Also you can use break.

onclick event of input button type is not working in chrome for some users

Here is my html code
<input type="button" name="Button" value=" Next " runat="server" id="btnNext" class="button" onclick ="if (!EmptyCheck()) return false;" />
and
function EmptyCheck() {
debugger;
var txtRSI = $("input[id$=txtRSI]").val();
var txtQFix = $("input[id$=txtQFix]").val();
var txtPassPercent = $("input[id$=txtPassPercent]").val();
var txtDefRejRate = $("input[id$=txtDefRejRate]").val();
var txtBuildVar = $("input[id$=txtBuildVar]").val();
var txtEffortVar = $("input[id$=txtEffortVar]").val();
var txtScheVar = $("input[id$=txtScheVar]").val();
var txtDeliMet = $("input[id$=txtDeliMet]").val();
var txtBudgetVar = $("input[id$=txtBudgetVar]").val();
var ddlOwner = $('select[id$="ddlOwner"]').val();
var ddlAccount = $('select[id$="ddlAccount"]').val();
var ddlProgramme = $('select[id$="ddlProgramme"]').val();
var ddlMonth = $('select[id$="ddlMonth"]').val();
var ddlYear = $('select[id$="ddlYear"]').val();
if ((txtRSI == "") || (txtQFix == "") || (txtPassPercent == "") || (txtDefRejRate == "") || (txtBuildVar == "") || (txtEffortVar == "") || (txtScheVar == "") ||
(txtDeliMet == "") || (txtBudgetVar == "") || (ddlOwner == "-1") || (ddlAccount == null) || (ddlProgramme == null) || (ddlMonth == 0) || (ddlAccount == "-1")
|| (ddlProgramme == "-1") || (ddlYear == 0)) {
alert("All fields are Mandatory");
return false;
}
else {
return true;
}
}
This is javascript method works fine in my browser.whereas the same is not working for others.
couldnt find why this happens..
inline code is not supported in chrome..i saw this in several posts..but it works for me..but not for others.. can somebody give an alternate solution to this???
also i have server side implememnted...wanted to achieve both.
i have tried like this also
getelementbyid('btnid').addeventlistener('click', function()){}

Have you tried just using the function? If your function returns a boolean value, why are you checking it to then return another boolean value? Just return EmptyCheck()
However, I will say that using the inline functions in my experience has been a poor decision. The functions can be managed/called more efficiently from an external jscript file. Here's an example:
Step 1
In your .js file, create a generic (but not anonymous) function for each page. For examples, we'll work in a hypothetical "Home" page.
function HomePageEvents() {
}
Step 2
Now we have a function that will serve as a container for your home page's javascript . . . But of course we need to run the function at some point. Well, we want to make sure the function is run once the document is finished loading of course, since we'll likely need to reference elements of the rendered page. So let's go ahead and create an anonymous function that will trigger this container function (aka, HomePageEvents() function). In your Home page, add the following:
<script type="text/javascript">
$(document).ready({function(){
HomePageEvents();
});
</script>
Step 3
What was it we were trying to do again? Oh, right! We want to add a click event for your button. Well, we can first start by creating the function for the click event. Now, I'm assuming your button has some kind of innate functionality, and all we are doing here is validating the button. If this is indeed the case, all we need to do is return a true or false indicating whether the event should continue.
function HomePageEvents() {
// Function to perform our validation.
function validateNext() {
if ((txtRSI == "") || (txtQFix == "") || (txtPassPercent == "") || (txtDefRejRate == "") || (txtBuildVar == "") || (txtEffortVar == "") || (txtScheVar == "") || (txtDeliMet == "") || (txtBudgetVar == "") || (ddlOwner == "-1") || (ddlAccount == null) || (ddlProgramme == null) || (ddlMonth == 0) || (ddlAccount == "-1") || (ddlProgramme == "-1") || (ddlYear == 0)) {
alert("All fields are Mandatory");
return false;
} else {
return true;
}
};
};
Step 4
Now that we have the validation function ready, we just need to add the function as a click event for our btnNext button.
function HomePageEvents() {
// Add function to btnNext button . . .
$('#btnNext').on('click', function(){
validateNext();
});
// Function to perform our validation.
function validateNext() {
if ((txtRSI == "") || (txtQFix == "") || (txtPassPercent == "") || (txtDefRejRate == "") || (txtBuildVar == "") || (txtEffortVar == "") || (txtScheVar == "") || (txtDeliMet == "") || (txtBudgetVar == "") || (ddlOwner == "-1") || (ddlAccount == null) || (ddlProgramme == null) || (ddlMonth == 0) || (ddlAccount == "-1") || (ddlProgramme == "-1") || (ddlYear == 0)) {
alert("All fields are Mandatory");
return false;
} else {
return true;
}
};
};
The end result is you get (1) all your javascript in a single file--which is better for caching, (2) the file is easily manageable, and (3) you can isolate code for each page.

As an alternate you can use jQuery click event. Read documentation from here .
$('.button').click(function(){ // button is the class name of your input control
// Your EmptyCheck Logic goes here.
});
Note that there are other solutions as well to bind click event using jQuery like .on().
$('.button').on('click', function() {
// Your EmptyCheck Logic goes here.
});
Hope this helps!

js syntax passing name elements form validation

I just need help on how to pass multiple 'name' elements in my function that validates a form submission.
I have this and works fine.
var x = document.forms["myForm"]["FirstName"].value;
if (x == null || x == "")
{
alert("asdf");
return false;
}
tried this but didnt work.
var x = document.forms["myForm"]["FirstName"+"LastName"].value;
if (x == null || x == "")
{
alert("asdf");
return false;
}
Any help with the syntax on how to do so would be appreciated.

What you are trying makes no sense.
var x=document.forms["myForm"]["FirstName"+"LastName"].value;
would get the value from an element called FirstNameLasteName.
So you probably meant this:
var x=document.forms["myForm"]["FirstName"].value + document.forms["myForm"]["LastName"].value;

You meant this:
var x=document.forms["myForm"]["FirstName"].value + " " +
document.forms["myForm"]["LastName"].value;
if (x==null || x=="")
{
alert("asdf");
return false;
}

How to use javascript validating two text areas

The below works, how would i go about including a 2nd "txtArea2"? I've tried joining a & (document.getElementById("txtArea2").value == '') but doesnt work. I'm new to js syntax if someone could help.
if(document.getElementById("txtArea1").value == '')
{
alert("debug");
document.getElementById("txtArea1").style.display ="none";
return false;
};

I'm not sure if I understand your question correctly but you probably want to compare them with || (OR) operator, so if txtArea1 or txtArea2 is empty then the validation shall not pass. That means both textareas will be required fields.
if (document.getElementById("txtArea1").value == '' || document.getElementById("txtArea2").value == '')
{
alert("debug");
document.getElementById("txtArea1").style.display ="none";
return false;
};

Double && specifies the AND condition.
if (document.getElementById("txtArea1").value == '' && document.getElementById("txtArea2").value == '')

If you want to treat both separately, you'll have to use two separate if statements as well. (I outsourced the textareas into variables for readability)
var txtarea1 = document.getElementById("txtArea1");
var txtarea2 = document.getElementById("txtArea2");
if(txtarea1.value == '')
{
alert("debug");
txtarea1.style.display = "none";
return false;
};
if(txtarea2.value == '')
{
alert("debug");
txtarea2.style.display = "none";
return false;
};
If you want to do one thing if either of them (1 or 2) is empty, try this:
if(txtarea1.value == '' || txtarea2.value == '')
{
alert("debug");
txtarea1.style.display ="none";
txtarea2.style.display ="none";
return false;
};

var t1 = document.getElementById("txtArea1").value;
var t2 = document.getElementById("txtArea2").value;
if( t1 == '' || t2 == '')
{
alert("debug");
document.getElementById("txtArea1").style.display ="none";
return false;
};

capturing the element in javascript

i would like to display the error message in the input element itself instead of showing an error message separately. how would i capture the element in which the message needs to be displayed?
this the code:
function checkForm(form) {
if (yname.getValue() == "" || yname.getValue() == "Your Name" || name.getValue() == "" || name.getValue() == "Name of the Book" || url.getValue() == "" || url.getValue() == "URL of the Book"){
[id-of-the-element].setTextValue("Field cannot be empty!");
return false;
}

You can "extend" your condition statement:
function checkForm(form) {
var result = true;
if (yname.getValue() == "" || yname.getValue() == "Your Name") {
setErrorMessage(yname);
result = false;
} else if (name.getValue() == "" || name.getValue() == "Name of the Book") {
setErrorMessage(yname);
result = false;
} else if (url.getValue() == "" || url.getValue() == "URL of the Book") {
setErrorMessage(yname);
result = false;
}
return result;
}
function setErrorMessage(field) {
field.setTextValue("Field cannot be empty!");
}

this is plain java script code if you are not using jquery
document.getElementById("id-of-the-element").value = "Field cannot be empty!";