Make SharePoint Form field Required based on another field using JQuery

Question

I have SharePoint 2013 foundation and would like to use JQuery on a custom NewForm to make Col1 and Col2 required when 'Option 1' is selected from Col3.

Could I also get the JQuery I would use on the custom EditForm where Col6 already says 'Option 1' thus making Col4 and Col5 required? I would need this in a case where the Client entering in NewForm would not need it to be required, but the Client editing the form would.

If I try to use List Validation, it removes the JQuery I am already using on the custom NewForm when validating the List Validation.

Answer 1

This should get you started. Dependency: jQuery

function PreSaveAction() {
    var proceed = true;
    var alertMsg = "Please fill in the required fields.";

    var ddSelectedCol3 = $('select[title^="Col3"]:eq(0) option:selected').text();
    if (ddSelectedCol3 == 'Option 1') {
        var appendAlertMsg = false;
        //Col1 and Col2 are required.
        $("input[title^='Col1']", "input[title^='Col2']").each(function () {
            if (!$.trim($(this).val())) { //if this field is empty
                $(this).css('border-color', 'red'); //change border color to red  
                proceed = false; //set do not proceed flag
                appendAlertMsg = true;
            }
        });

        if (appendAlertMsg)
            alertMsg += "\n- Col1 & Col2 are required.";
    }

    var ddSelectedCol6 = $('select[title^="Col6"]:eq(0) option:selected').text();
    if (ddSelectedCol6 == 'Option 1') {
        var appendAlertMsg = false;
        //Col4 and Col5 are required. Assuming these are text fields
        $("input[title^='Col4']", "input[title^='Col5']").each(function () {
            if (!$.trim($(this).val())) { //if this field is empty
                $(this).css('border-color', 'red'); //change border color to red  
                proceed = false; //set do not proceed flag
                appendAlertMsg = true;
            }
        });

        if (appendAlertMsg)
            alertMsg += "\n- Col4 & Col5 are required."
    }

    if (proceed === false) {
        alert(alertMsg);
        return false;
    }
}