jquery验证不适用于相关的html

Question

http://jsfiddle.net/7sARw/17/

Above is a jsfiddle of my application. I apologise that there is a lot of code in the fiddle but the code is needed to get the app working and I have really tried to cut the code down a lot.

But please use the jsfiddle by following the steps below:

1. When you open fiddle, click on the "Open Grid" link and select the "True or False" option. You will see "True" and "False" buttons appear and a text input which states 1.

2. If you click on the "Add Question" button, an alert appears stating you have selected less answers than the require amount. This is true as the text input states you need 1 number of answers but you havn't selected an answer. So Select either "True" or "False" then click on the "Add Question" button.

3. You will see that it appends a row into the table of what you have entered. Now within the row turn off the selected button so that neither "True" or "False" button is turned on. Now at bottom of application click on the "Submit Details" button. You realise that no alert appears stating you selected less answers.

This is the problem I am having, how came when I click on the "Submit Details" button that no alert appears stating that you have selected less answers? I know that the submit button will display other validation messages so there is nothing wrong on how I am calling the function, it is within the validation() function where I am trying to validation number of answers selected where I am having a problem.

Below is the code for the validation which is at the bottom of the jsfiddle:

 function validation() {

    var marks = parseInt($("#total-weight").text());
    var _qid = "";
    var _msg = "";

    var maxQuestions = 5;
    var questionsAdded = $('tr.optionAndAnswer').length;

    var alertValidation = "";
    // Note, this is just so it's declared...
    $("tr.optionAndAnswer").each(function () {


        _qid = $("td.qid", this).text();
        _msg = "You have errors on Question Number: " + _qid + "\n";

        $(".numberAnswerTxtRow", this).each(function () {


            var currenttotal = $(this).closest('.optionAndAnswer').find('.answerBtnsOn').length;

            if (currenttotal < $(this).val()) {
                alertValidation += "\n\u2022 You have selected less answers than the required amount\n";
            }

            if (alertValidation != "") {
                return false; //Stop the each loop 
            }

        });



        if (alertValidation != "") {
            return false;
        }
    });



    if (alertValidation != "") {
        alert(_msg + alertValidation);
        return false;
    }

    return true;
} 

Answer 1

This appears to work: http://jsfiddle.net/7sARw/20/

It seems that you weren't attaching a click handler to call validation() . I added this code in your $(document).ready function:

$('#QandA').submit(function (evt) {
   return validation();
});

This says, submit the form if validation() returns true, and otherwise don't submit it. Now if you add a question, change the Number of Answers field to 2, and submit, the alert shows up.

Answer 2

Type mismatch error:

<table id="optionAndAnswer" class="optionAndAnswer">

$("tr.optionAndAnswer").each(function() {

<table> id is optionAndAnswer , class is also optionAndAnswer , oke fine not an error, but you jQuery selector is selecting an <tr> with the class optionAndAnswer , and this one is not present in you HTML