show multiple alert in one message in jquery - javascript

I have multiple required field controls on my aspx form.
Now what I want is to show the validation message on button click if anything is not filled or checked.
I want it on one message in JQuery.
Here is my JQuery code:-
$(document).ready(function () {
$('#btnSave').click(function (e) {
if (!validateTitle() || !validatePrefix() || !validateTextBoxes()) {
e.preventDefault();
}
});
function validateTitle() {
if ($("#ddlTitle").val() > "0") {
if ($("#ddlTitle").val() == "1104" && $("#txtTitle").val() === "") {
alert("Please enter the text in other title");
return false;
}
return true;
} else {
alert('Please select the title');
return false;
}
}
function validatePrefix() {
if ($("#ddlPrefix").val() > "0") {
if ($("#ddlPrefix").val() == "1110" && $("#txtPrefix").val() === "") {
alert("Please enter the text in other prefix");
return false;
}
return true;
} else {
alert('Please select the prefix');
return false;
}
}
function validateTextBoxes() {
if ($("#txtFirstName").val() === "") {
alert('First name is required');
return false;
}
if ($("#txtMiddleName").val() === "") {
alert('Middle name is required');
return false;
}
if ($("#txtLastName").val() === "") {
alert('Last name is required');
return false;
}
if ($("#txtFatherName").val() === "") {
alert('Father name is required');
return false;
}
if ($("#txtCurrentCompany").val() === "") {
alert('Current company is required');
return false;
}
if ($("#txtDateofJoin").val() === "") {
alert('Date is required');
return false;
}
if ($("#txtCurrentExp").val() === "") {
alert('Current Experience is required');
return false;
}
return true;
}
});

Try below code
var ErrArr = [];
$(document).ready(function () {
$('#btnSave').click(function (e) {
e.preventDefault();
validateTitle();
validatePrefix();
validateTextBoxes();
if(ErrArr.length > 0) {
alert(ErrArr.join("\n"));
ErrArr = [];
return false;
}
});
function validateTitle() {
if ($("#ddlTitle").val() > "0") {
if ($("#ddlTitle").val() == "1104" && $("#txtTitle").val() === "") {
ErrArr.push("Please enter the text in other title");
}
} else {
ErrArr.push('Please select the title');
}
}
function validatePrefix() {
if ($("#ddlPrefix").val() > "0") {
if ($("#ddlPrefix").val() == "1110" && $("#txtPrefix").val() === "") {
ErrArr.push("Please enter the text in other prefix");
}
} else {
ErrArr.push('Please select the prefix');
}
}
function validateTextBoxes() {
if ($("#txtFirstName").val() === "") {
ErrArr.push('First name is required');
}
if ($("#txtMiddleName").val() === "") {
ErrArr.push('Middle name is required');
}
if ($("#txtLastName").val() === "") {
ErrArr.push('Last name is required');
}
if ($("#txtFatherName").val() === "") {
ErrArr.push('Father name is required');
}
if ($("#txtCurrentCompany").val() === "") {
ErrArr.push('Current company is required');
}
if ($("#txtDateofJoin").val() === "") {
ErrArr.push('Date is required');
}
if ($("#txtCurrentExp").val() === "") {
ErrArr.push('Current Experience is required');
}
}
});

Instead of using alert all the time, save the message to a variable instead.
Then alert that message after all tests are done.
$(document).ready(function () {
var message = "";
$('#btnSave').click(function (e) {
message = "";
if (!validateTitle() || !validatePrefix() || !validateTextBoxes()) {
e.preventDefault();
alert(message);
}
});
function validateTitle() {
if ($("#ddlTitle").val() > "0") {
if ($("#ddlTitle").val() == "1104" && $("#txtTitle").val() === "") {
message += "Please enter the text in other title\n";
return false;
}
return true;
} else {
message += 'Please select the title\n';
return false;
}
}
....
});

Use the following fiddle [JSFiddle][1] , this will basically push all the error messages into an array and can show the results.
Please update if this works for you as i am not aware of markup

Just a simple trick you can do
just use a string variable for messages appending and counter.
$(document).ready(function () {
var Messages;
var counter=0;
$('#btnSave').click(function (e) {
validateTitle();
validatePrefix();
validateTextBoxes();
if(counter > 0)
{
alert(Messages);
e.preventDefault();
counter=0;
}
});
function validateTitle() {
debugger;
if ($("#ddlTitle").val() > "0") {
if ($("#ddlTitle").val() == "1104" && $("#txtTitle").val() === "") {
Messages += "Please enter the text in other title";
Messages += "\n";
counter ++;
}
} else {
Messages += 'Please select the title';
Messages += "\n";
counter ++;
}
}
function validatePrefix() {
debugger;
if ($("#ddlPrefix").val() > "0") {
if ($("#ddlPrefix").val() == "1110" && $("#txtPrefix").val() === "") {
Messages += "Please enter the text in other prefix";
Messages += "\n";
counter ++;
}
} else {
Messages += 'Please select the prefix';
Messages += "\n";
counter ++;
}
}
function validateTextBoxes() {
debugger;
if ($("#txtFirstName").val() === "") {
Messages += 'First name is required';
Messages += "\n";
counter ++;
}
if ($("#txtMiddleName").val() === "") {
Messages += 'Middle name is required';
Messages += "\n";
counter ++;
}
if ($("#txtLastName").val() === "") {
Messages += 'Last name is required';
Messages += "\n";
counter ++;
}
if ($("#txtFatherName").val() === "") {
Messages += 'Father name is required';
Messages += "\n";
counter ++;
}
if ($("#txtCurrentCompany").val() === "") {
Messages += 'Current company is required';
Messages += "\n";
counter ++;
}
if ($("#txtDateofJoin").val() === "") {
Messages += 'Date is required';
Messages += "\n";
counter ++;
}
if ($("#txtCurrentExp").val() === "") {
Messages += 'Current Experience is required';
Messages += "\n";
counter ++;
}
}
});
Just update counter and impliment check if check > 0 show message
(alert)
it will benefit you two things
User dont need to click each time and get alert.. dont need to
return false.user Must know at once what erors are in form.
Secondly code is simple/Simple logic.

Try this.
$(document).ready(function () {
var Errors = [];
$('#btnSave').click(function (e) {
if (!validateTitle() || !validatePrefix() || !validateTextBoxes()) {
if(Errors.length > 0) {
alert(Errors.join("\n"));
}
e.preventDefault();
}
});
function validateTitle() {
if ($("#ddlTitle").val() > "0") {
if ($("#ddlTitle").val() == "1104" && $("#txtTitle").val() === "") {
Errors.push("Please enter the text in other title");
}
return true;
} else {
Errors.push('Please select the title');
}
}
function validatePrefix() {
if ($("#ddlPrefix").val() > "0") {
if ($("#ddlPrefix").val() == "1110" && $("#txtPrefix").val() === "") {
Errors.push("Please enter the text in other prefix");
}
return true;
} else {
Errors.push('Please select the prefix');
}
}
function validateTextBoxes() {
if ($("#txtFirstName").val() === "") {
Errors.push('First name is required');
}
if ($("#txtMiddleName").val() === "") {
Errors.push('Middle name is required');
}
if ($("#txtLastName").val() === "") {
Errors.push('Last name is required');
}
if ($("#txtFatherName").val() === "") {
Errors.push('Father name is required');
}
if ($("#txtCurrentCompany").val() === "") {
Errors.push('Current company is required');
}
if ($("#txtDateofJoin").val() === "") {
Errors.push('Date is required');
}
if ($("#txtCurrentExp").val() === "") {
Errors.push('Current Experience is required');
}
return true;
}
});
Add perfect separation in each message to differentiate it.

Related

Javascript is only validating the first variable and ignoring my others

Trying to make an address book for school and entered two fields and having validation. It seems like it's only validating the first field which is the name and ignoring the rest? I'm not sure if I have something wrong? It keeps displaying not a valid name as the error message and nothing else.
var validate_birthdate = my.isBirthdateBad(add_birthdate);
if (!valid_name.test(add_name)) {
alert("not a valid name");
valid_contact = false;
} else if (add_address.length > 0) {
if (!valid_address.test(add_address)) {
alert("not a valid address: " + add_address);
valid_contact = false;
}
} else if (add_birthdate.length > 0) {
if (!valid_birthdate.test(add_birthdate)) {
alert("not a valid birthdate");
valid_contact = false;
}
} else if (add_gender.length > 0) {
if (!valid_gender.test(add_gender)) {
alert("not a valid gender");
valid_contact = false;
}
} else if (add_ocupation.length > 0) {
if (!valid_occupation.test(add_occupation)) {
alert("not a valid job title");
valid_contact = false;
}
} else if (validate_birthdate) {
alert("not a valid birthdate: " + validate_birthdate);
valid_contact = false;
} else if (!(add_photo !== undefined) &&
(add_photo.length > 0) &&
(add_photo.indexOf("data:image/jpeg") === 0)) {
alert("image is not a jpeg!");
valid_contact = false;
}
// note the use of the "anonymous" function
// this returns an array of all of the matched contacts! Powerful!
var exists = _address_book_contacts.filter(function (contact) {
//check to see if the current "add_name"
// is found in the address book!
return contact.name() === add_name;
});
if (exists && (exists.length > 0)) {
if (!confirm("WARNING: " +
add_name +
" exists in database. " +
"Would you like to add again?")) {
valid_contact = false;
}
}

JavaScript - While loop statement prints out multiple times

I am unable to print a single output statement when there is no match. At the moment, if there is no match (no number incl. in password) it will print out multiple times until it does find a match.
Could anyone take a look at my dilemma below please:
var password = "password1";
var i = 0;
function checkPassword(password) {
if (password === "") {
console.log("password cannot be empty");
} else if (password.length < 8) {
console.log("password should be at least 7 characters");
} else {
while (i < password.length) {
if (password[i] == password.match(/[0-9]/g)) {
console.log("found: " + password[i]);
} else {
console.log("not found");
}
i++;
}
}
}
var password = "password1";
var i = 0;
function checkPassword(password) {
if (password === "") {
console.log("password cannot be empty");
} else if (password.length < 8) {
console.log("password should be at least 7 characters");
} else {
var found = false;
while (i < password.length) {
if (password[i].match(/[0-9]/g)) {
found = true;
break;
}
i++;
}
if(found) {
console.log("found");
} else {
console.log("not found");
}
}
}
But, if you are only looking for a number in the string, you should better do it like this:
var password = "password1";
function checkPassword(password) {
if (password === "") {
console.log("password cannot be empty");
} else if (password.length < 8) {
console.log("password should be at least 7 characters");
} else if(!password.match(/[0-9]{1,}/)) {
console.log("password should contain at least one number");
} else {
console.log("okay");
}
}
Here is a JSFiddle: https://jsfiddle.net/7btt1axb/
Something like this?
var password = "password1";
function checkPassword(password) {
if (password === "") {
console.log("password cannot be empty");
} else if (password.length < 8) {
console.log("password should be at least 7 characters");
} else {
var i = 0, found = false;
while (i < password.length && !found) {
if (password[i] == password.match(/[0-9]/g)) found = true;
else i++;
}
if (found) {
console.log("found: " + password[i]);
} else console.log("not found");
}
}
checkPassword(password);

SCRIPT5007: Unable to get property 'value' of undefined or null reference only in IE9 only

I only receive this error in Internet Explorer 9. IE8 and IE10 run the script fine. when click on the Submit button then i am getting this error
SCRIPT5007: Unable to get property 'value' of undefined or null reference CNSIControlServlet, line 15364 character 3
function checkForPhysicianInfo(){
var visibleRenderingPhyInfoValue = (document.frmSubmitInstClaim.elements['fhdn&BillingRendering']).value;
var visibleOperatePhyInfoValue = (document.frmSubmitInstClaim.elements['fhdn&isOperatePhyInfoVisible']).value;
var visibleOtherOperatingPhyInfoValue = (document.frmSubmitInstClaim.elements['fhdn&isOtherOperatingPhyInfoVisible']).value;
var visibleReferringPhyInfoValue = (document.frmSubmitInstClaim.elements['fhdn&isReferringPhyInfoVisible']).value;
var formName1='frmSubmitInstClaim';
var formElement = document.forms[formName1];
var l_sRenderingProviderID = document.frmSubmitInstClaim.elements['nfld_a&db|IG_CLAIM_HEADER-SRVCNG_PRVDR_LCTN_IDENTIFIER'];
var selectRenderingProviderIDType = formElement.elements['ncmb&db|IG_CLAIM_HEADER-SRVCNG_PRVDR_IDNTFR_TYPE_CID'];
RenderingProviderIDType = selectRenderingProviderIDType.options[selectRenderingProviderIDType.selectedIndex].value ;
var l_sOperateProviderID =document.frmSubmitInstClaim.elements['nfld_a&db|IG_CLAIM_HEADER-OP_PRVDR_IDNTFR'];
var selectOperateProviderIDType = formElement.elements['ncmb&db|IG_CLAIM_HEADER-OP_PRVDR_IDNTFR_TYPE_CID'];
OperateProviderIDType = selectOperateProviderIDType.options[selectOperateProviderIDType.selectedIndex].value ;
var l_sOtherOperatingProviderID =document.frmSubmitInstClaim.elements['nfld_a&db|IG_CLAIM_HEADER-OT_PRVDR_IDNTFR'];
var selectOtherOperatingProviderIDType = formElement.elements['ncmb&db|IG_CLAIM_HEADER-OT_PRVDR_IDNTFR_TYPE_CID'];
OtherOperatingProviderIDType = selectOtherOperatingProviderIDType.options[selectOtherOperatingProviderIDType.selectedIndex].value ;
var l_sReferringProviderID =document.frmSubmitInstClaim.elements['nfld_a&db|IG_CLAIM_HEADER-RF_LCTN_IDENTIFIER'];
var selectReferringProviderIDType = formElement.elements['ncmb&db|IG_CLAIM_HEADER-RF_IDNTFR_TYPE_CID'];
ReferringProviderIDType = selectReferringProviderIDType.options[selectReferringProviderIDType.selectedIndex].value ;
if("Yes" == visibleRenderingPhyInfoValue)
{
if(Trim(l_sRenderingProviderID.value) == "" )
{
alert("Please Enter Rendering Physican Provider ID ");
l_sRenderingProviderID.focus();
return false;
}
if(Trim(RenderingProviderIDType) == "-2" )
{
alert("Please Enter Rendering Physican Provider ID Type");
selectRenderingProviderIDType.focus();
return false;
}
//MIPRO00050010
if((Trim(RenderingProviderIDType) == "3") && (Trim(l_sRenderingProviderID.value)!= "" )
&& (!IsNumeric(l_sRenderingProviderID.value)))
{
alert("Please enter valid number in Provider ID.");
l_sRenderingProviderID.focus();
return false;
}
if((Trim(RenderingProviderIDType) == "3") && (Trim(l_sRenderingProviderID.value).length < "10") )
{
alert("NPI must be 10 digits.");
l_sRenderingProviderID.focus();
return false;
}
//MIPRO00050010
}//Rendering
if("Yes" == visibleOperatePhyInfoValue)
{
if(Trim(l_sOperateProviderID.value) == "")
{
alert("Please Enter Operating Provider ID");
l_sOperateProviderID.focus();
return false;
}
if(Trim(OperateProviderIDType) == "-2" )
{
alert("Please Enter Operating Provider ID Type");
selectOperateProviderIDType.focus();
return false;
}
//MIPRO00050010
if((Trim(OperateProviderIDType) == "3") && (Trim(l_sOperateProviderID.value)!= "" )
&& (!IsNumeric(l_sOperateProviderID.value)))
{
alert("Please enter valid number in Provider ID.");
l_sOperateProviderID.focus();
return false;
}
if((Trim(OperateProviderIDType) == "3") && (Trim(l_sOperateProviderID.value).length < "10") )
{
alert("NPI must be 10 digits.");
l_sOperateProviderID.focus();
return false;
}
//MIPRO00050010
}//Operating
if("Yes" == visibleOtherOperatingPhyInfoValue)
{
if(Trim(l_sOtherOperatingProviderID.value) == "" )
{
alert("Please Enter Other Operating Physician Provider ID");
l_sOtherOperatingProviderID.focus();
return false;
}
if(Trim(OtherOperatingProviderIDType) == "-2" )
{
alert("Please Enter Other Operating Physician Provider ID Type");
selectOtherOperatingProviderIDType.focus();
return false;
}
//MIPRO00050010
if((Trim(OtherOperatingProviderIDType) == "3") && (Trim(l_sOtherOperatingProviderID.value)!= "" )
&& (!IsNumeric(l_sOtherOperatingProviderID.value)))
{
alert("Please enter valid number in Provider ID.");
l_sOtherOperatingProviderID.focus();
return false;
}
if((Trim(OtherOperatingProviderIDType) == "3") && (Trim(l_sOtherOperatingProviderID.value).length < "10") )
{
alert("NPI must be 10 digits.");
l_sOtherOperatingProviderID.focus();
return false;
}
//MIPRO00050010
}//Other Operating
if("Yes" == visibleReferringPhyInfoValue)
{
if(Trim(l_sReferringProviderID.value) == "")
{
alert("Please Enter Referring Physician Provider ID");
l_sReferringProviderID.focus();
return false;
}
if(Trim(ReferringProviderIDType) == "-2" )
{
alert("Please Enter Referring Physician Provider ID Type");
selectReferringProviderIDType.focus();
return false;
}
//MIPRO00050010
if((Trim(ReferringProviderIDType) == "3") && (Trim(l_sReferringProviderID.value)!= "" )
&& (!IsNumeric(l_sReferringProviderID.value)))
{
alert("Please enter valid number in Provider ID.");
l_sReferringProviderID.focus();
return false;
}
if((Trim(ReferringProviderIDType) == "3") && (Trim(l_sReferringProviderID.value).length < "10") )
{
alert("NPI must be 10 digits.");
l_sReferringProviderID.focus();
return false;
}
//MIPRO00050010
}//Referring
return true;
}
</script>

add select form validator

i use this code for validate input text and input checkbox . but i want add select box validate to required function . i want user have to select one string and select box fill .
required:{
set:function(val) {
//Check the type of the input
switch(this.tagName) {
case 'INPUT':
if($(this).attr('type') == 'text') {
val = $.trim(val);
if(val === '') {
return false;
}else {
return true;
}
}else if($(this).attr('type') == 'checkbox') {
return $(this).is(':checked') ? true : false;
}
break;
default:
return false;
break;
}
},
message:'This field is required.'
},
but i dont know what and where add code .
else if($(this).attr('type') == 'checkbox') {
return $(this).is(':checked') ? true : false;
}
else if($(this).attr('select') == '') {
if(val === '') {
return false;
}else {
return true;
}
}

Radio button validation causing rest of validation to fail

The radio validation works but then the rest don't. What have I done wrong?
function validateRadio(radios) {
for (i = 0; i < radios.length; ++i) {
if (radios[i].checked) return true;
}
return false;
}
function validateForm() {
if (validateRadio(document.forms["pancettaForm"]["updateShip"])) {
return true;
} else {
alert("Please tell us how you would like to update your order.");
return false;
}
}
var x = document.forms["pancettaForm"]["order-number"].value;
if (x == null || x == "") {
alert("Please provide your order number.");
return false;
}
var x = document.forms["pancettaForm"]["full-name"].value;
if (x == null || x == "") {
alert("Please provide your full name, or the recipients name if you are updating shipping information.");
return false;
}
var x = document.forms["pancettaForm"]["phone"].value;
if (x == null || x == "") {
alert("Please provide a phone number in case of delivery questions.");
return false;
}
var display = document.getElementById('address').style.display;
if (display == 'block') {
var x = document.forms["pancettaForm"]["address"].value;
if (x == null || x == "") {
alert("Please provide your address.");
return false;
}
}
var display = document.getElementById('city').style.display;
if (display == 'block') {
var x = document.forms["pancettaForm"]["city"].value;
if (x == null || x == "") {
alert("Please provide your city.");
return false;
}
}
var display = document.getElementById('state').style.display;
if (display == 'block') {
if (document.pancettaForm.state.value == "- Select State -") {
alert("Please provide your state.");
return false;
}
}
var display = document.getElementById('zip').style.display;
if (display == 'block') {
var x = document.forms["pancettaForm"]["zip"].value;
if (x == null || x == "") {
alert("Please provide your zip code.");
return false;
}
}
var display = document.getElementById('newShipDate').style.display;
if (display == 'block') {
if (document.pancettaForm.state.value == "- Select Date -") {
alert("Please choose your new shipping date.");
return false;
}
}
Just reverse the test so you do not have to return
if(!validateRadio (document.forms["pancettaForm"]["updateShip"]))
{
alert("Please tell us how you would like to update your order.");
return false;
}
// continue
You had the end bracket after the test of the radios so the rest of the script just floated in cyberspace
Also return true only once at the end and do not have var x multiple times and be consistent in how you access the form elements and I also fixed your date test which was testing state
function validateForm() {
var x,display,form = document.forms["pancettaForm"];
if (!validateRadio(form["updateShip"])) {
alert("Please tell us how you would like to update your order.");
return false;
}
x = form["order-number"].value;
if (x == null || x == "") {
alert("Please provide your order number.");
return false;
}
x = form["full-name"].value;
if (x == null || x == "") {
alert("Please provide your full name, or the recipients name if you are updating shipping information.");
return false;
}
x = form["phone"].value;
if (x == null || x == "") {
alert("Please provide a phone number in case of delivery questions.");
return false;
}
display = form["address"].style.display;
if (display == 'block') {
x = form["address"].value;
if (x == null || x == "") {
alert("Please provide your address.");
return false;
}
}
display = form["city"].style.display;
if (display == 'block') {
x = form["city"].value;
if (x == null || x == "") {
alert("Please provide your city.");
return false;
}
}
display = form['state'].style.display;
if (display == 'block') {
x = form['state'].value;
if (x == "- Select State -") {
alert("Please provide your state.");
return false;
}
}
display = form['zip'].style.display;
if (display == 'block') {
x = form["zip"].value;
if (x == null || x == "") {
alert("Please provide your zip code.");
return false;
}
}
display = form["newShipDate"].style.display;
if (display == 'block') {
x = form["newShipDate"].value;
if (x.value == "- Select Date -") {
alert("Please choose your new shipping date.");
return false;
}
}
return true;
}

Categories