Javascript form validation help

JavaScript
1

Hi All

I have a form with four fields. I need some help with the validation.

The first three fields (Visit 1, Visit 2 and Visit 3) cannot be completed unless a yes radio button is selected from top.

I need to make the fourth field (Purchase) exempt from the yes/no so it can be filled in regardless. I cannot work out how to do this

I’ve also added code for the following:
If the second visit is completed without visit 1, a message prompts saying a second visit cannot be entered without the first.
I have tried to do the same with three. So visit 3 cannot be completed unless visit 2 has been completed, but this isn’t working. It lets me submit the form

Lastly, if i add a date in the future for purchase (fouth field) without completing the above fields, i don’t get a prompt indicating a date cannot be entered in the future.
This only works if i’ve completed the first three fields

UserDefinedJavascript.OnAfterFormInitialise = function ()
{
    try
    {
        var WishesToReceiveReceipt = '';
        if (UserDefinedJavascript.DocumentMode == 'Edit') {
            WishesToReceiveReceipt = GetRadioButtonListValue(GetControl("WishesToReceiveReceipt"));
        }
        else {
            WishesToReceiveReceipt = GetControl("WishesToReceiveReceiptID").value;
        }

        var optOutReason = '';
        if (UserDefinedJavascript.DocumentMode == 'Edit') {
            optOutReason = getComboboxValue("OptOutReason");
        }
        else {
            optOutReason = GetControl("OptOutReasonDesc").value.replace(/\n/g, '');
        }

        if (WishesToReceiveReceipt == '0') {
            UserDefinedJavascript.ToggleOptOutReason('1');
        } else {
            UserDefinedJavascript.ToggleOptOutReason('0');
        }

        if (optOutReason == 'Other Reason') {
            UserDefinedJavascript.ToggleOptOutOtherReasonDetails('1');
        } else {
            UserDefinedJavascript.ToggleOptOutOtherReasonDetails('0');
        }

        if (UserDefinedJavascript.DocumentMode == 'Edit') {
            UserDefinedJavascript.ToggleVisitFields(WishesToReceiveReceipt);
        }
    }
    catch (e)
    {
        window.alert(e.message + "\nUserDefinedJavascript.OnAfterFormInitialise()");
    }
}

UserDefinedJavascript.OnAfterCheckData = function ()
{
    try
    {
        var now = new Date();
        now.setSeconds(0);
        now.setMilliseconds(0);

        var WishesToReceiveReceipt = GetRadioButtonListValue(GetControl("WishesToReceiveReceipt"));

        // Yes - 1, No - 0
        if (WishesToReceiveReceipt == '0') {

            // Validate Opt Out Reason
            if (!validateCombobox("OptOutReason", "Reason for Not Engaging")) return false;

            var optOutReason = getComboboxValue("OptOutReason");

            // Validate Opt Out Other Reason Details
            if (optOutReason == 'Other Reason') {
                if (!validateText("OptOutOtherReasonDetails", "Other Reason Details", true)) return false;
            }

        } else {

            // Validate Visit 1 Date Given.
            if (!isDate("Visit1DateGiven", "First Visit - Date Given", false)) return false;

            var Visit1DateGiven = GetControl("Visit1DateGiven");

            if (Visit1DateGiven.value == '') {

                var Visit1BrandOfCar = GetControl("Visit1BrandOfCar");

                if (Visit1BrandOfCar.value != '-1') {
                    window.alert("Visit 1 - Date Given cannot be blank if Brand of Car selected.");
                    Visit1DateGiven.focus();
                    return false;
                }

            } else {

                var Visit1DateGivenDttm = getDateTime(Visit1DateGiven.value);
             	
                Visit1DateGivenDttm.setSeconds(0);
                Visit1DateGivenDttm.setMilliseconds(0);

                if (DateDiff('s', Visit1DateGivenDttm, now) < 0) {
                    window.alert("First Visit - Date Given cannot be in the future.");
                    Visit1DateGiven.focus();
                    return false;
                }

                if (!validateCombobox("Visit1BrandOfCar", "First Visit - Brand of Car")) return false;

            }

            // Validate Visit 2 Date Given.
            if (!isDate("Visit2DateGiven", "Second Visit - Date Given", false)) return false;

            var Visit2DateGiven = GetControl("Visit2DateGiven");

            if (Visit2DateGiven.value == '') {

                var Visit2BrandOfCar = GetControl("Visit2BrandOfCar");

                if (Visit2BrandOfCar.value != '-1') {
                    window.alert("Second Visit - Date Given cannot be blank if Brand of Car selected.");
                    Visit2DateGiven.focus();
                    return false;
                }

            } else {

                var Visit2DateGivenDttm = getDateTime(Visit2DateGiven.value);
             	
                Visit2DateGivenDttm.setSeconds(0);
                Visit2DateGivenDttm.setMilliseconds(0);

                if (DateDiff('s', Visit2DateGivenDttm, now) < 0) {
                    window.alert("Second Visit - Date Given cannot be in the future.");
                    Visit2DateGiven.focus();
                    return false;
                }

                if (!validateCombobox("Visit2BrandOfCar", "Second Visit - Brand of Car")) return false;

                if (Visit1DateGiven.value == '') {

                    window.alert("Second Visit details cannot be entered without First Visit details.");
                    Visit2DateGiven.focus();
                    return false;

                } else {

                    var Visit1DateGivenDttm = getDateTime(Visit1DateGiven.value);
             	
                    Visit1DateGivenDttm.setSeconds(0);
                    Visit1DateGivenDttm.setMilliseconds(0);

                    if (DateDiff('s', Visit1DateGivenDttm, Visit2DateGivenDttm) < 0) {
                        window.alert("Second Visit- Date Given cannot be less than First Visit - Date Given.");
                        Visit2DateGiven.focus();
                        return false;
                    }

           
    // Validate Visit 3 Date Given.
            if (!isDate("Visit3DateGiven", "Visit - Date Given", false)) return false;

            var Visit3DateGiven = GetControl("Visit3DateGiven");

            if (Visit3DateGiven.value == '') {

                var Visit3BrandOfCar = GetControl("Visit3BrandOfCar");

                if (Visit3BrandOfCar.value != '-1') {
                    window.alert("Booster - Date Given cannot be blank if Brand of Car selected.");
                    Visit3DateGiven.focus();
                    return false;
                }

            } else {

                var Visit3DateGivenDttm = getDateTime(Visit3DateGiven.value);
             	
                Visit3DateGivenDttm.setSeconds(0);
                Visit3DateGivenDttm.setMilliseconds(0);

                if (DateDiff('s', Visit3DateGivenDttm, now) < 0) {
                    window.alert("Booster - Date Given cannot be in the future.");
                    Visit3DateGiven.focus();
                    return false;
                }

                if (!validateCombobox("Visit3BrandOfCar", "Third Visit - Brand of Car")) return false;

                if (Visit2DateGiven.value == '') {

                    window.alert("Booster details cannot be entered without Second visit details.");
                    Visit3DateGiven.focus();
                    return false;

                } else {

                    var Visit2DateGivenDttm = getDateTime(Visit2DateGiven.value);
             	
                    Visit2DateGivenDttm.setSeconds(0);
                    Visit2DateGivenDttm.setMilliseconds(0);

                    if (DateDiff('s', Visit2DateGivenDttm, Visit3DateGivenDttm) < 0) {
                        window.alert("Visit 3 - Date Given cannot be less than Second Visit - Date Given.");
                        Visit3DateGiven.focus();
                        return false;



                    }

// Validate Purchase Date Given.
            if (!isDate("PurchaseDateGiven", "Purchase - Date Given", false)) return false; {

            var PurchaseDateGiven = GetControl("PurchaseDateGiven");

             var PurchaseDateGivenDttm = getDateTime(PurchaseDateGiven.value);
             	
                PurchaseDateGivenDttm.setSeconds(0);
                PurchaseDateGivenDttm.setMilliseconds(0);

                if (DateDiff('s', PurchaseDateGivenDttm, now) < 0) {
                    window.alert("Purchase - Date Given cannot be in the future.");
                    PurchaseDateGiven.focus();
                    return false;
         

                }
               }



                        }


}
                }

            }

        }
    }
    catch (e)
    {
        window.alert(e.message + "\nUserDefinedJavascript.OnAfterCheckData()");
        return false;
    }
}

UserDefinedJavascript.ToggleOptOutReason = function (enable)
{
    try
    {
        var rwOptOutReason = GetControl("rwOptOutReason");
        
        // Yes - 1, No - 0
        if (enable == '1') {
            rwOptOutReason.style.display = 'table-row';

            if (UserDefinedJavascript.DocumentMode == 'Edit') {
                ControlStateManager.ToggleElement("lblOptOutReasonLabel", "OptOutReason", true, true, false, false);
            }
        } else {
            rwOptOutReason.style.display = 'none';

            if (UserDefinedJavascript.DocumentMode == 'Edit') {
                ControlStateManager.ToggleElement("lblOptOutReasonLabel", "OptOutReason", true, false, false, false);
            }
        }
    }
    catch (e)
    {
        window.alert(e.message + "\nUserDefinedJavascript.ToggleOptOutReason()");
    }
}

UserDefinedJavascript.ToggleOptOutOtherReasonDetails = function (enable)
{
    try
    {
        var rwOptOutOtherReasonDetails = GetControl("rwOptOutOtherReasonDetails");
        
        // Yes - 1, No - 0
        if (enable == '1') {
            rwOptOutOtherReasonDetails.style.display = 'table-row';

            if (UserDefinedJavascript.DocumentMode == 'Edit') {
                ControlStateManager.ToggleElement("lblOptOutOtherReasonDetailsLabel", "OptOutOtherReasonDetails", true, true, false, false);
            }
        } else {
            rwOptOutOtherReasonDetails.style.display = 'none';

            if (UserDefinedJavascript.DocumentMode == 'Edit') {
                ControlStateManager.ToggleElement("lblOptOutOtherReasonDetailsLabel", "OptOutOtherReasonDetails", true, false, false, false);
            }
        }
    }
    catch (e)
    {
        window.alert(e.message + "\nUserDefinedJavascript.ToggleOptOutOtherReasonDetails()");
    }
}

UserDefinedJavascript.ToggleVisitFields = function (enable)
{
    try
    {
        if (UserDefinedJavascript.DocumentMode == 'Edit') {
            // Yes - 1, No - 0
            if (enable == '1') {

                ControlStateManager.ToggleElement("lblVisit1DateGivenLabel", "Visit1DateGiven", true, false, false, false);
                ControlStateManager.ToggleElement("lblVisit1BrandOfCarLabel", "Visit1BrandOfCar", true, false, false, false);

                ControlStateManager.ToggleElement("lblVisit2DateGivenLabel", "Visit2DateGiven", true, false, false, false);
                ControlStateManager.ToggleElement("lblVisit2BrandOfCarLabel", "Visit2BrandOfCar", true, false, false, false);

                ControlStateManager.ToggleElement("lblVisit3DateGivenLabel", "Visit3DateGiven", true, false, false, false);
                ControlStateManager.ToggleElement("lblVisit3BrandOfCarLabel", "Visit3BrandOfCar", true, false, false, false);


            } else {
                ControlStateManager.ToggleElement("lblVisit1DateGivenLabel", "Visit1DateGiven", false, false, true, true);
                ControlStateManager.ToggleElement("lblVisit1BrandOfCarLabel", "Visit1BrandOfCar", false, false, true, true);

                ControlStateManager.ToggleElement("lblVisit2DateGivenLabel", "Visit2DateGiven", false, false, true, true);
                ControlStateManager.ToggleElement("lblVisit2BrandOfCarLabel", "Visit2BrandOfCar", false, false, true, true);

                ControlStateManager.ToggleElement("lblVisit3DateGivenLabel", "Visit3DateGiven", false, false, true, true);
                ControlStateManager.ToggleElement("lblVisit3BrandOfCarLabel", "Visit3BrandOfCar", false, false, true, true);


            }
        }
    }
    catch (e)
    {
        window.alert(e.message + "\nUserDefinedJavascript.ToggleVisitFields()");
    }
}

UserDefinedJavascript.WishesToReceiveReceipt_Click = function ()
{
    try
    {
        // Show/hide opt out reason fields and enable/disable Visit fields if required.

        var WishesToReceiveReceipt = GetRadioButtonListValue(GetControl("WishesToReceiveReceipt"));

        if (WishesToReceiveReceipt == '0') {
            UserDefinedJavascript.ToggleOptOutReason('1');
        } else {
            UserDefinedJavascript.ToggleOptOutReason('0');
        }

        UserDefinedJavascript.ToggleOptOutOtherReasonDetails('0');

        // Yes - 1, No - 0
        if (WishesToReceiveReceipt == '1') {
            GetControl("OptOutReason").value = '-1';
            GetControl("OptOutOtherReasonDetails").value = '';

        } else {
            GetControl("Visit1DateGiven").value = '';
            GetControl("Visit1BrandOfCar").value = '-1';
            GetControl("Visit2DateGiven").value = '';
            GetControl("Visit2BrandOfCar").value = '-1';
            GetControl("Visit3DateGiven").value = '';
            GetControl("Visit3BrandOfCar").value = '-1';
        }

        UserDefinedJavascript.ToggleVisitFields(WishesToReceiveReceipt);
    }
    catch (e)
    {
        window.alert(e.message + "\nUserDefinedJavascript.WishesToReceiveReceipt_Click()");
    }
}

UserDefinedJavascript.OptOutReason_Change = function ()
{
    try
    {
        // Show/hide opt out reason other details and blank field if required.

        var optOutReason = getComboboxValue("OptOutReason");

        if (optOutReason == 'Other Reason') {
            UserDefinedJavascript.ToggleOptOutOtherReasonDetails('1');
        } else {
            UserDefinedJavascript.ToggleOptOutOtherReasonDetails('0');
        }

        if (optOutReason != 'Other Reason') {
            var optOutOtherReasonDetails = GetControl("OptOutOtherReasonDetails");

            optOutOtherReasonDetails.value = '';
        }
    }
    catch (e)
    {
        window.alert(e.message + "\nUserDefinedJavascript.OptOutReason_Change()");
    }
}

Thanks for your time

2

In the html set the 3 input attributes to disabled.
When the radio button is checked remove the disabled attribute from the first input.
When you tab to complete the first input remove the disabled attribute from the second input.
Remove the disabled attribute from the third element when completing the second input.
You may need to explicitly set the focus to the newly enabled inputs.
You willed keyUp handlers on inputs one and two looking for tab or return

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.