重用来自匿名函数的 jQuery 验证

Question

I am getting a typeError undefined is not a function error when trying to validate the visible fields.

I defined the variable that would hold the jquery validator in the global scope, but executed . validate () from within an anonymous function closure which is dynamically generated by symfony/twig/JqueryValidationBundle.

I did this because I wanted to use the generated code for a custom function that is contained in a separate js file.

Is it possible to do this? or is there another way to reuse the generated code?

This is the generated function:

<script>
var form, groups;
(function($) {
    form = $("form[name=\"scs_intakebundle_intake\"]");
    groups = {"Default": false,"firstPanel": false};
    form.find("*[name=\"scs_intakebundle_intake\x5Bsubmit\x5D\"]").click(function() {
        groups = {"Default": true,"firstPanel": true};
    });

    form.validate({
        rules: {
            "scs_intakebundle_intake\x5BfirstName\x5D": {
                "required": {depends: function() {return groups["firstPanel"]; }}
            },
            "scs_intakebundle_intake\x5BlastName\x5D": {
                "required": {depends: function() {return groups["firstPanel"]; }}
            }
        }});
})(jQuery);
</script>

This is the function from intake.js

function nextPanel() {
    var result = true;
    $('input:visible').each(function(i,item){
        //form is the global var that .validate() was already run.
        //below is where form.element is undefined.
        result = form.element(item) && result;
        //the next line did not work either, but I though I'd share
        result = item.valid() && result;
    } );
    if (result) {
         $('.first').slideUp();
         $('.second').slideDown();        
    }
}

This is the html form:

    <form name="scs_intakebundle_intake" method="post" action="/v2/web/app_dev.php/" novalidate="novalidate">
    <input type="hidden" id="scs_intakebundle_intake__token" name="scs_intakebundle_intake[_token]" value="956WbsNijk_3F_8X_0IGolrcdZaZzar93OwVHAxspyo">

    <div class="first">
        <div class="row">
            <div class="medium-7 columns">
                <input type="text" id="scs_intakebundle_intake_firstName" name="scs_intakebundle_intake[firstName]" required="required" maxlength="255" aria-required="true">
            </div>
        </div>
        <div class="row">
            <div class="medium-7 columns">
                <input type="text" id="scs_intakebundle_intake_lastName" name="scs_intakebundle_intake[lastName]" required="required" maxlength="255" aria-required="true">
            </div>
        </div>
        <div>
            <button type="button" id="scs_intakebundle_intake_next1" name="scs_intakebundle_intake[next1]" style="margin:0;" class="next1 panelButton" onclick="nextPanel();">Find my plan</button>
        </div>
    </div>

    <div class="second">
        <div class="row">
            <div class="medium-7 columns">
                <div id="scs_intakebundle_intake_married">
                    <input type="radio" id="scs_intakebundle_intake_married_0" name="scs_intakebundle_intake[married]" value="0">
                    <label for="scs_intakebundle_intake_married_0">No</label><input type="radio" id="scs_intakebundle_intake_married_1" name="scs_intakebundle_intake[married]" value="1">
                    <label for="scs_intakebundle_intake_married_1">Yes</label></div>
            </div>
        </div>
        <div class="row" style="padding: 1.1rem">
            <button type="button" id="scs_intakebundle_intake_prev1" name="scs_intakebundle_intake[prev1]" style="float:left" class="prev1 panelButton" onclick="previousPanel();">Previous</button>
            <button type="submit" id="scs_intakebundle_intake_submit" name="scs_intakebundle_intake[submit]" class="panelButton">Find my plan</button>
        </div>
    </div>
</form>

I did verify in chrome devtools console, that $('input:visible') does contain the form elements I want to check. form.validate() does return a $.validator object.

The validation does work when clicking the final submit button, but not when I try to trigger the validation from the custom function.

Any ideas?

Answer 1

Important : if the form doesn't yet exist in the DOM when you call .validate() then you cannot call .validate() until it does. You also cannot call .validate() more than once on the same form.

Answer 2

Well, I discovered the actual problem and have 2 answers for this post.

1. I forgot to mention that the div.second was hidden via css. The anonymous function block tries to find the submit button to add code for the click event. This button is hidden at the time. So, with the function incomplete, validation is not able to run. When I removed code relevant to the hidden part, all is well.

2. Being a newbie, I did not realized that I could get access to the validator object by re running the validate code. So adding var validator = $('form").validate(); got me access to the object that was the original question of this post. Even so, it did not work as explained above, regarding the hidden element.

Thank you everyone for your assistance.