Question

I am using SharePoint 2010 and have a customized newform.aspx and editform.aspx that I am using JQuery to create several tabs due to the amount of fields and length of the forms.

One of the issues that I am having is how to visually advise the user when they are attempting to save the form but have not entered values in some (or all of the required fields). I am using the OOTB validation features in SharePoint to indicate which fields need to addressed, however since many of the required fields are now on different tabs I would like to pop-up an alert window indicating which required fields need to be addressed prior to saving the form.

Normally I would only be dealing with two or three required fields, but in this case I am dealing with eight required fields and possibly more. In the past I would do the following using JavaScript if else statements:

 function PreSaveAction() {
    var tbTitle = getTagFromIdentifierAndTitle("input", "TextField", "Title");
    var tbVisitor = getTagFromIdentifierAndTitle("input", "TextField", "Visitor"); {
        if (tbTitle.value == "" && tbVisitor.value == "") {
            alert(tbTitle.title + ' is a required field' + '\n' + tbVisitor.title + ' is a required field');
            return true;
        } else {
            if (tbTitle.value == "") {
                alert(tbTitle.title + ' is a required field');
                return true;
            } else {
                if (tbVisitor.value == "") {
                    alert(tbVisitor.title + ' is a required field');
                    return true;
                } else {
                    return true;
                }
            }
        }
    }
}
function getTagFromIdentifierAndTitle(tagName, identifier, title) {
    var len = identifier.length;
    var tags = document.getElementsByTagName(tagName);
    for (var i = 0; i < tags.length; i++) {
        var tempString = tags[i].id;
        if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len)) {
            return tags[i];
        }
    }
    return null;
}

Due to the fact that I have so many required fields to address I know that multiple nested if else statements is not the most efficient way to accomplish. Would utilizing switch case be the way to go? Possibly looping? How would I go about doing this (I am not overly proficient with JavaScript)?

Thanks for the help in advance!

Answer 1

You don’t need nested statements. Just go through your fields one at a time to build your alert, then trigger it:

var alertString="";

if (tbTitle.value == "") {  
    alertString+= tbTitle.title + ' is a required field' + '\n';  
}
if (tbVisitor.value == "") {  
    alertString+= tbVisitor.title + ' is a required field' + '\n';  
}
...
// After going through all fields:
if (alertString) {alert(alertString);}