Displaying different errors based input types and validation

Question

Here's something that's been bending my brain recently.

I'm building a Web Application in Spring MVC and some forms include multiple input types (eg form:radiobuttons [spring radio buttons], select boxes, text fields etc...). My goal is to use the .hide() and .show() methods in jQuery to hide/show a div with the ID "msgDiv" underneath the heading ("Select a Color") which is the same on both forms. What I want to achieve is to use the same validation function for both forms and show/hide custom messaging accordingly.

Note This is just an exercise I made up to ensure proper error handling and validation before altering my Application so overlook the silliness of color choices and music in this example.

On to the code!

Form1: "Select Form" (select box validation ONLY)
HMTL code snippet:

<form:form action="FormA" commandName="user" name="myForm" id="myFormSelect">
    <input type="hidden"  id="color" name="color" value="${requestScope.user.color}" />
        <h2>Select a Color</h2>
        <div id="msgDiv">
            <form:errors path="*"  element="span"  id="errorMsg" /> 
            <span id="message"/></span><br/><br/>
        </div>
        <p>Please select a color</p>

            <select id="userSelect" name"user" class="selectbox_class" style="max-width: 200px;">
                <option value="">--Select One--</option>
                    <%
            Map<String, String> myMap = ( Map<String, String>) session.getAttribute("myMap");
            for (String key:myMap.keySet())
            {
            %>  <option value="<%= key %>"><%out.print(key+"</option>");
            }
            %>
            </select>
    <br/>
    <br/>
    <div class="button-panel"><span class="buttons buttons-left"></span>
        <button type="button" class="buttons buttons-middle"  onClick="selectVal();" id="send" value="send">Submit</button>
        <span class="buttons buttons-right"></span>
    </div>
</form:form>

Form2: "Select & Radio Form" (select box and radio validation)
HMTL code snippet:

<form:form action="FormB" commandName="user" name="mySecondForm" id="mySecondFormSelectAndRadio">
    <input type="hidden"  id="color" name="color" value="${requestScope.user.color}" />
        <h2>Select a Color</h2>
        <div id="msgDiv">
            <form:errors path="*"  element="span"  id="errorMsg" /> 
            <span id="message"/></span><br/><br/>
        </div>
        <p>Please select a color</p>

            <select id="userSelect" name"user" class="selectbox_class" style="max-width: 200px;">
                <option value="">--Select One--</option>
                    <%
            Map<String, String> myMap = ( Map<String, String>) session.getAttribute("myMap");
            for (String key:myMap.keySet())
            {
            %>  <option value="<%= key %>"><%out.print(key+"</option>");
            }
            %>
            </select>
    <br/>
<h2>Music Genre</h2>
<p>Please select the button which describes your taste in music</p>

<form:radiobutton path="music" name="radio" id="radio1" value="classicForm"/><label for="radio1">Classical Music</label><br> 
<form:radiobutton path="music" name="radio"  id="radio2" value="jazzForm"/><label for="radio2">Jazz Music</label><br>
<br>
<div class="button-panel"><span class="buttons buttons-left"></span>
   <button type="button" class="buttons buttons-middle" onClick="history.back(-1)">Back</button>
   <span class="buttons buttons-right"></span>
</div>
<div id="spacer"></div><div id="spacer"></div>
<div class="button-panel">
    <div id="spacer"></div>
    <span class="buttons buttons-left"></span>
    <button type="button" class="buttons buttons-middle"  onClick="selectVal();" id="send" value="send">Submit</button><span class="buttons buttons-right"></span>
</div>

Here's the script section at the bottom of each page so far

  $(document).ready(function(){

<% if (myMap != null) {%>
    $('select[name=userSelect]').change(function() {
        var selVal = $(this).val();
        var txtVal = $("#userSelect option:selected").text();
        $("#color").val(txtVal);    
     }); 

     $('select[name=userSelect]').val($("#color").val());

<%} else { %>
    $("#color").val("${user.color}");
<%} %>
    });

    $(document).ready(function(selectVal) {  
     if ($("#userSelect").val()=="")      
        $("#msgDiv").show();
    return dataValid;
    });

And here's my external javascipt file so far:

function submitForm(formId)
{
document.getElementById(formId).submit();
}

function selectVal() {
var dataValid = true;
var selector = document.getElementById("userSelect");
var radios = $("input[name=radio]");
var message= document.getElementById("message");
var errorMsg = "";

message.innerHTML = "";
if (selector.value == "" || radios.checked == false) {
    $('#msgDiv').hide();
    dataValid = false; 

    if (selector.value == "") {
        errorMsg += "Please Select an Color from the Drop Down Menu";
    }

    if (radios.checked == false) {
        errorMsg += "Please select a Genre of Music";
    }

    message.innerHTML = errorMsg; 
    }

    return dataValid;
   }

Requirements:

1. Div should remain hidden unless validation is not complete even on page load
2. Appropriate error message should appear
3. If user clicks submit without selecting a color or music genre a combined message should appear.

Also here is a similar thread for reference. else if statement for validation .

Thanks!!

Answer 1

Okay, after a few more hours I was able to come up with this answer

• @DWB took out the hide()/show() all together and used .toggle() to switch the display on the page
• Instead of trying to call code from both internal and external scripts I went with the KISS method. Always a good thing for beginners or intermediate programmers such as myself to keep in mind. KEEP IT SIMPLE STUPID

So instead of 6 functions (2 functions on each html page, 2 methods in a separate file each calling 2 functions) the finished product is:

• One Function for VALIDATION and One window.onload function call to keep the div hidden onload and reload in an external file ("yourname.js")

If you have any questions please message or email me and as always, a different approach is ALWAYS welcome!!

SOLUTION:

function customMessageForMultipleInputs()
{
var choicesForm = document.getElementById("choicesForm");

if(radio1.checked=="" && radio2.checked=="" && document.getElementById("userSelect").value=="")
{           selected=false;
        document.getElementById("msgDiv").style.display = "block";
        document.getElementById("errorMsg").innerHTML="Please select your Favorite Color and
   a Genre of Music";
        return false;

 }
 if(document.getElementById("userSelect").value=="")
 {
        document.getElementById("msgDiv").style.display = "block";
        document.getElementById("errorMsg").innerHTML="Please select a Color";
        return false;
 }if(document.getElementById("radio1").checked=="" && document.getElementById("radio2").checked=="") 
 {  
selected=false;
document.getElementById("msgDiv").style.display = "block";
    document.getElementById("errorMsg").innerHTML="Please select a Genre of Music;
     return false;
 }else{   
        document.getElementById("msgDiv").style.display = "none";
        reportOutageConfirm.submit();
        return true;
        document.getElementById("msgDiv").style.display = "none";
 }
 };
window.onload = function() {
customMessageForMultipleInputs();
 };

Here's how it works:

1. I created a function 'customMessageForMultipleInputs() which is called in my HTML file inside a button on a click event. (eg myBTN prop=val, prop=val, onClick="customMessageForMultipleInputs etc..)

2. In my original question I was jumbling up my programming logic. It was easier to just say that the .checked property of my radio buttons (egif(document.getElementById("radio1").checked=="") Similar to the ' value ' of the"userSelect" dropbox.

3. window.onload = function() { customMessageForMultipleInputs (); };

Sounds silly but #3 had me for a loop for a bit because I was trying to be "slick" and doing more than what was necessary. For anyone who is new window.onload is essentially ensuring than when a page is displayed (not always rendered however from my experience), this function will fire and the default setting of my error div ('#msgDiv') will be hidden and remain hidden from the page unless the user has not properly filled out the form.

Anyway, I hope this helps someone one day and THANKS!!!!

I Love this site!! :)