Read elements with "error" attribute and alert

Question

I have following html form. There will be many business validations – and if validation fail an "error" attribute will be set on the element.

In the following form, I am returning a flag to see whether the validation is failed. How to make a common function to find all elements that has "error" attribute, and alert the value of "errDesc" attribute?

Note: I am looking for a JavaScript solution without using other libraries.

Note: My client browsers does not support HTML5

<html>
<head>
    <script type="text/javascript">

        function loadMessage(frm) 
        {
            alert("Page Loaded");
        }
        function CustomSetError(element, msg) {
            alert("calledSUB");
            var isError = false;

            //In productioon code, error will be set based on business validation
            try {

                //Set error
                element.setAttribute("error", "true");
                element.setAttribute("errDesc", msg);

                isError = true;
            }
            catch (e) { }

            return isError;
        }

        function ValidateForm(frm) {
            alert("validate");
            var isErrorPresent = CustomSetError(frm.txtBillAddressText, "TestMessage");

            if (isErrorPresent) {
                return false;
            }
        }

    </script>
</head>
<body bgcolor="#E5DBE2" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" onload="loadMessage(frmPOHeader)">
    <form name="frmPOHeader" method="post" id="frmPOHeader">
        <input name="txtBillAddressText" class="ArrowSmall" type="text" readonly="readonly" id="txtBillAddressText" fieldname="Bill To" />
        <input name="hidBillToBuyerAddressCD" type="hidden" id="hidBillToBuyerAddressCD" />
        <input type="submit" name="btnSubmit" value="Submit" onclick="return ValidateForm(frmPOHeader);" language="javascript" id="btnSubmit" class="ButtonSmallBlue" />

        <br /><br />
        <input name="txtDummy" class="ArrowSmall" type="text" readonly="readonly" id="txtDummy" fieldname="Dummy" />

    </form>
</body>
</html>

Rather than than an `error` attribute, you should use a (valid) `data-error` (and `data-errordesc`) attribute. As for finding elements, in JavaScript (not using a library), with a particular attribute: http://stackoverflow.com/questions/2694640/find-an-element-in-dom-based-on-an-attribute-value — David Thomas, Jul 13 '16 at 15:07
In which case you're future-proofing your HTML for when your client *does* have an HTML5 compliant browser, and `data-error` is no less valid than `error` in HTML 4. — David Thomas, Jul 13 '16 at 15:11

score 1 · Accepted Answer · answered Jul 13 '16 at 15:10

You can use querySelectorAll to get all the div.

Then use hasAttribute to check if the element has an attribute error

Use getAttribute to get the errDesc

// will give all the div
    var a = Array.prototype.slice.call(document.querySelectorAll("div"))
    a.forEach(function(item){
    if(item.hasAttribute('error')){
    console.log(item.getAttribute('errDesc'))
    }
    })

JSFIDDLE

Note:querySelectorAll will select all the div which may be costly. You can actually add a class to error element. errorDesc can be as it is there.

Then you can do document.querySelectorAll("div.error") which will select dom only with error class

You may need to write a separate validation function for it – brk Jul 13 '16 at 15:37 — brk, Jul 13 '16 at 15:37

Read elements with "error" attribute and alert

1 Answers1