Combining AlloyUI / AUI fields and custom validators

[Andrew Ohm, modificado 7 Anos atrás.]

Hi All -

I am a bit new to LifeRay and AlloyUI development, and recently I have needed to create custom validation on an autofield.

This example is similar to my autofield implementation: http://proliferay.com/liferay-auto-fields-example/

However, I also need a pairing wherein the user must add a Title field if they have already added a URL field. The code for which is below, however I have hardcoded the "1" for checking only the first autofield created. How can I get this working based on what sequence you are in within the autofields being created? See below:

HTML

        <div id="data-url-title">
            <span style="font-weight: bold;">Data URL and Title:</span>
            <div class="lfr-form-row lfr-form-row-inline">
                <div class="row-fields" style="display: flex;">
                    <aui:input fieldparam="dataUrl1" id="dataUrl1" cssclass="dataUrl" name="dataUrl1" label="URL:">
                        <aui:validator name="url" errorMessage="Data URL must be a URL - please include http:// and all other information and try again" />
                    </aui:input>
                    <aui:input fieldparam="dataTitle1" id="dataTitle1" cssclass="dataTitle" name="dataTitle1" label="Title:">
                        <aui:validator name="maxLength" errormessage="Value must be less than or equal to 100 characters">100</aui:validator>

                        <aui:validator name="custom" errormessage="Must have a Title if URL was provided ">
                        function(val, fieldNode, ruleValue){
                        var urlProvided = $("input[name=<portlet:namespace />dataUrl1]").val();;

                        if (((urlProvided != null) &amp;&amp; (urlProvided != "")) &amp;&amp; ((val == null) || (val == ""))){
                            return false;
                        } 
                        else {
                            return true;
                        }

                        }
                        </aui:validator>
                    </aui:input>
                </div>
            </div>
        </div>

JS (stated at bottom of page after aui:form ending tag)

<aui:script>
    AUI().use('liferay-auto-fields', function(A) {
        new Liferay.AutoFields({
            contentBox : '#data-url-title',
            fieldIndexes : '<portlet:namespace />dataUrlTitleIndexes'
        }).render();
    });     
</aui:script>

The error message seems to work for the custom validator defined in the HTML (see aui:validator which is custom), but it falls apart some in later fields giving a more generic error of "please fix this field" - I imagine it's probably a side effect of it looking at that first field. I was hoping that through the same magic that more fields are created with the +/- buttons that validation rules would also be set up, and the "1" at the end of each input would increment with new field creation, much like it does already and works with autofields on their own.

Anyone have thoughts on how best to approach this? I know there's also ways to make validators in the "AUI().use" part, but the only way I've really gotten something close to working is with custom validator tags. Anyone have some ideas in getting this to work within the provided Liferay auto field implementation?

Below is the type of validation that works so far. Note it falls apart when you reach fields after the first one (obviously due to hardcoding the 1 in the validation) - but I also didn't expect that kind of error either. Thoughts?