Livecycle JavaScript…压缩if语句

Question

I'm working on a form that will have a "Validate" button. The purpose of this button is to check and make sure all the fields are completed (this is what the project demands). Below is the code that checks to see if the field is null and then changes the border color and displays a text box.

if (form1.Main.sfRequestor.requestNameFirst.rawValue == null){
    form1.Main.sfRequest.txtValidate.presence = "visible";
    form1.Main.sfRequestor.requestNameFirst.border.edge.color.value = "255,0,0"
} else {
    form1.Main.sfRequest.txtValidate.presence = "hidden";
    form1.Main.sfRequestor.requestNameFirst.border.edge.color.value = "255,255,255"
};

if (form1.Main.sfRequestor.requestNameLast.rawValue == null){
    form1.Main.sfRequest.txtValidate.presence = "visible";
    form1.Main.sfRequestor.requestNameLast.border.edge.color.value = "255,0,0"
} else {
    form1.Main.sfRequest.txtValidate.presence = "hidden";
    form1.Main.sfRequestor.requestNameLast.border.edge.color.value = "255,255,255"
};

There are 20+ fields in several subforms that need to be checked. I'm trying to consolidate the code but am at a loss on how to do so. Can variables handle field names in Javascript?

Answer 1

You could easily make this into a simple function:

 function validateField(element) {
     if (element.rawValue == null) {
        form1.Main.sfRequest.txtValidate.presence = "visible";
        element.border.edge.color.calue = "255,0,0";
     }
     else {
        form1.Main.sfRequest.txtValidate.presence = "hidden";
        element.border.edge.color.calue = "255,255,255";      
     }
 }

And then just call it like so:

validateField(form1.Main.sfRequestor.requestNameFirst);
validateField(form1.Main.sfRequestor.requestNameLast);

To simplify even further, put all 20 elements in an array and loop

var elements = [form1.Main.sfRequestor.requestNameFirst, form1.Main.sfRequestor.requestNameLast, ...];
elements.forEach(function(element) {
    validateField(element);
});

Answer 2

You can make this into a loop pretty easily, and could write it as an IIFE to keep your namespace clean

(function (arr) {
    var txtValidate = form1.Main.sfRequest.txtValidate,
        i, e;
    for (i = 0; i < arr.length; ++i) {
        e = form1.Main.sfRequestor[arr[i]]; // cache me
        if (e.rawValue == null){
            txtValidate.presence = "visible";
            e.border.edge.color.value = "255,0,0"
        } else {
            txtValidate.presence = "hidden";
            e.border.edge.color.value = "255,255,255"
        }
    }
}(['requestNameFirst', 'requestNameLast']));

However, it looks like txtValidate.presence only ever gets set to whatever the last item's conditions were, are you sure you don't want to use a flag and set this last instead? eg

(function (arr) {
    var txtValidateState = 'hidden',
        i, e;
    for (i = 0; i < arr.length; ++i) {
        e = form1.Main.sfRequestor[arr[i]];
        if (e.rawValue == null){
            txtValidateState = "visible"; // any null makes txtValidate visible
            e.border.edge.color.value = "255,0,0"
        } else {
            e.border.edge.color.value = "255,255,255"
        }
    }
    form1.Main.sfRequest.txtValidate.presence = txtValidateState; // set last
}(['requestNameFirst', 'requestNameLast']));

---

Update for generic forms, assuming sfRequestor and sfRequest

(function (form, arr) {
    var txtValidateState = 'hidden',
        i, e;
    for (i = 0; i < arr.length; ++i) {
        e = form.sfRequestor[arr[i]];
        if (e.rawValue == null){
            txtValidateState = "visible";
            e.border.edge.color.value = "255,0,0";
        } else {
            e.border.edge.color.value = "255,255,255";
        }
    }
    form.sfRequest.txtValidate.presence = txtValidateState;
}(form1.Main, ['requestNameFirst', 'requestNameLast']));

---

Update Assuming sfRequest is a constant but sfRequestor could be something different

(function () { // moved IIFE to protect namespace
    function validate(form, subform, arr) { // now named, new param subform
        var txtValidateState = 'hidden',
            i, e;
        for (i = 0; i < arr.length; ++i) {
            e = form[subform][arr[i]]; // select from subform
            if (e.rawValue == null){
                txtValidateState = "visible";
                e.border.edge.color.value = "255,0,0";
            } else {
                e.border.edge.color.value = "255,255,255";
            }
        }
        form.sfRequest.txtValidate.presence = txtValidateState; // assuming stays same
    }
    validate(form1.Main, 'sfRequestor', ['requestNameFirst', 'requestNameLast']);
    validate(form1.Main, 'sfClientInfo', ['firstname']);
    // if you have many here you can re-write as a loop again
}());