JavaScript validation issue

Question

I have following requirements:

Get questions from db in servlet.
Display themin jsp.
Check if question is mandatory or not.
If question is mandatory then answer to that is reuired at the time of submiting form and if no answer is provided for the question then don't submit form and display warning.

Up to number 3 I have done it. But don't know how to go about number 4. How can I check this in javascript. As number of questions are not fixed as they are coming from database. Also how many of them are mandatory is also not fixed. How to go for this?

What value should I check in javascript? How can I know that which questions are mandatory in javascript once they are displayed in page?

---- Edit

This is how my data is displayed on jsp:

for (Question question : questions) {%>
    <tr>
    <td><b><%= question.getDefination() %></b>
    <table style="margin-left: 25px;">
<%
    int type = question.getType();
    List<Option> options = question.getOptions();
    for(Option option: options){%>
        <tr>
            <% if(type == 2){ %>
                  <td><input type="radio" name="<%=question.getIdQuestion() %>" value="<%= option.getIdQueOption() %>" /><%= option.getOptionName() %></td>
            <%} else if(type == 1) {  %>
                  <td><input type="checkbox" name="<%=option.getIdQueOption() %>" value="<%= option.getIdQueOption() %>" /><%= option.getOptionName() %></td>
            <%} %>
        </tr>
    <%}%>
</table></td></tr>
<%}%>

--- Edit 2 Sample page will look like this:

Sample page

If you post a bit of the generated HTML and JavaScript code people can give an answer that relates directly to what you've already done. One thing you can try is at the point in your (server-side) JSP code where you render each question give the mandatory ones a particular class, e.g., class="mandatory", then you can add a validation function (called from form's onsubmit event) that loops through all the elements with that class. I wouldn't reinvent the wheel though: there are several libraries that have customisable validation code (there are several jQuery validation plugins, for example). — nnnnnn
– nnnnnn, Commented Aug 3, 2011 at 6:36
@nnnnnn: I have added how I display data list on jsp. Here I have one method question.isMandatory() to check whether the question is mandatory or not. — Harry Joy
– Harry Joy, Commented Aug 3, 2011 at 6:47

zatatatata · Accepted Answer · 2011-08-03 07:18:23Z

1

I'd suggest doing it like nnnnnn also suggested: add a class to all mandatory questions, so that you'd be able to identify them from optional questions. Then you'd need some Javascript that looks up the mandatory questions (I suggest using jQuery for simplicity).

Let's say that you have class="mandatory" on every mandatory question's tr element.

function onSubmit(e) {
    // Set the default result to be successful
    var allFilled = true;
    // Get all mandatory rows
    var mandatory = $('tr.mandatory');

    // Loop through each matching element
    mandatory.each(function(i, question) {
        var answer = $(question);

        // Find all elements that are checked and if none is found, 
        // the question must be unanswered
        if (answer.find('input:checked, input[type="text"][value!=""]').length === 0)
            allFilled = false;
    });

    // If the default value "true" was changed, there must be empty answers
    if (!allFilled)
        e.preventDefault();
}

Of course you'd have to bind the onSubmit function to submit event on the form you are checking.

BTW, I don't think having a table inside a table is valid HTML, but I'm not sure.

edited Aug 3, 2011 at 7:18

answered Aug 3, 2011 at 7:04

zatatatata

4,8212 gold badges22 silver badges42 bronze badges

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

5 Comments

Harry Joy Over a year ago

Thank you so much. This works fine for questions of type checkbox and radio. But i also have question with type textbox how to check for them. This logic fails there. I have combination of questions of types radio, checkbox and textbox.

Harry Joy Over a year ago

This doesn't work.The flag is always false. I have added a screen shot in question to demonstrate how the page will look like. Also my form gets submitted all the time how to prevent it if allFlag is false.

Harry Joy Over a year ago

Ohh... sorry my mistake I have textarea not textbox. So I have to check for textarea value and not of textbox value. Got it worker. Thank you very much.. :)

Harry Joy Over a year ago

one more question my form gets submitted all the time how to prevent it if allFlag is false.

zatatatata Over a year ago

@mark e.preventDefault() should disable the form from being submitted if there were problems with empty fields. By allFlag do you refer to allFilled in my code or is allFlag not a typo? I presume that all your fields are inside a form tag which has submit event bound to my function, in which case the above code should do just fine in preventing it from being submitted with empty answers.

Collectives™ on Stack Overflow

JavaScript validation issue

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related