how to display validation summary of an asp.net page using Javascript

Question

I have one asp.net form.
In it i have many fields which are required.
I want to display validation summary of all fields at the end of the form.
I have already checked for valid values of input controls.
Now i only want is Summary.

Here is my code for valid data input

<script language="javascript" type="text/javascript">
        function userCheck(uName) {
            var uName = document.getElementById(uName);
            var letters = /^[A-Za-z0-9]+$/;
            if (uName.value.match(letters) && uName.value.length != 0) {
                uName.style.border = "2px solid #008A2E";
                return true;
            }
            else {
                uName.value = uName.value.replace(/[\W]/g, '');
                uName.style.border = "2px solid #ff0000";
                uName.focus();
                return false;
            }
        }
</script>

This is just one function for username check.
I have many more to deal with.
Is there any way to display summary from all fields at the last when submit button is pressed ?
below solution is not working.

 function ddlcheck(ddlclg) {
            var clg = document.getElementById(ddlclg.id);
            var clgname = document.getElementById('<%= LblCollegeName.ClientID %>');
            clgname.style.display = "block";
            clgname.innerHTML = "Selected College : " + clg.options[clg.selectedIndex].value;
            clg.style.border = "1px solid #008A2E";
            if (clg.options[clg.selectedIndex].value == "Select") {
                clgname.style.display = "none";
                clg.style.border = "1px solid #ff0000";
                validationhtml = validationhtml + "<b>*</b> College" + "</br>";
            }
        }

above code is for dropdownlist.

 function select() {
            var count = 0;
            var chkSelectAll = document.getElementById('<%= ChkSelectAll.ClientID %>');
            var chkList = document.getElementById('<%= chk.ClientID %>').getElementsByTagName("input");
            for (var i = 0; i < chkList.length; i++) {
                if (chkList[i].checked == true) {
                    count++;
                }
            }
            if (count == chkList.length)
                chkSelectAll.checked = true;
            else {
                chkSelectAll.checked = false;
            }
        }

above code is for selected check boxes.

Jhonny D. Cano -Leftware- · Accepted Answer · 2018-08-01 21:14:53Z

1

create a div ( errorreport) at required location validation summary give it style as you needed

After that

<script language="javascript" type="text/javascript">
    var validationhtml="";
    function userCheck(uName) {
        var uName = document.getElementById(uName);
        var letters = /^[A-Za-z0-9]+$/;
        if (uName.value.match(letters) && uName.value.length != 0) {
            uName.style.border = "2px solid #008A2E";
            return true;
        } else {
            uName.value = uName.value.replace(/[\W]/g, '');
            uName.style.border = "2px solid #ff0000";
            uName.focus();
            validationhtml=validationhtml +"uname is not correct" ;
            return false;
        }
    }

    function validationsummary() {

        // if using jquery
        $(".errorreport").html(validationhtml); 

        //for javascript
        document.getelementbyid("errorreport").innerHTML = validationhtml; 

        if(validationhtml == "") {
            return true;
        } else {
            return false;
        }
    }
</script>

and call validationsummary() on submit button click

edited Aug 1, 2018 at 21:14

Jhonny D. Cano -Leftware-

18.1k15 gold badges84 silver badges103 bronze badges

answered Sep 12, 2012 at 5:50

Gyan Chandra Srivastava

1,38010 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Hardik Fefar Over a year ago

I have many more fields. Have i to call all the methods like this ?

Hardik Fefar Over a year ago

Can you please tell me what is $(...) i have no idea about that. I need it in Javascript.

Gyan Chandra Srivastava Over a year ago

$(".errorreport") give you div with id errorreport you can write it in javascript document.getelementbyid("errorreport").innerHTML = validationhtml;

Hardik Fefar Over a year ago

and will it properly write in that div ? i want like bullet list

Gyan Chandra Srivastava Over a year ago

ok its also easy write validationhtml=validationhtml +"uname is not correct" line as validationhtml=validationhtml +"<b>*</b> uname is not correct" +"</br>"

|

Collectives™ on Stack Overflow

how to display validation summary of an asp.net page using Javascript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related