Validate two forms inside one form element with ParsleyJS












0















I'm building two forms which will live on a single page on a Kentico website. kentico websites are wrapped in one single form field so I can't create individual form elements for each form on the page. The problem is parsleyJS will only allow you to pass a form to initialise it e.g. $("#form").parsley(); and I need to validate the forms independent of each other. Has anyone had this issue before? Can anyone recommend a workaround.






$("#form").parsley();

input{
display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.1/parsley.min.js"></script>
<form action="" id="form">
<div class="form1">
<label for="fname">First Name</label>
<input type="text" name="fname" required>
<label for="lname">Last Name</label>
<input type="text" name="lname" required>
<input type="submit" value="submit">
</div>
<div class="form2">
<input type="text" name="anotherInput" required>
<input type="submit" value="submit">
</div>
</form>












share|improve this question



























    0















    I'm building two forms which will live on a single page on a Kentico website. kentico websites are wrapped in one single form field so I can't create individual form elements for each form on the page. The problem is parsleyJS will only allow you to pass a form to initialise it e.g. $("#form").parsley(); and I need to validate the forms independent of each other. Has anyone had this issue before? Can anyone recommend a workaround.






    $("#form").parsley();

    input{
    display:block;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.1/parsley.min.js"></script>
    <form action="" id="form">
    <div class="form1">
    <label for="fname">First Name</label>
    <input type="text" name="fname" required>
    <label for="lname">Last Name</label>
    <input type="text" name="lname" required>
    <input type="submit" value="submit">
    </div>
    <div class="form2">
    <input type="text" name="anotherInput" required>
    <input type="submit" value="submit">
    </div>
    </form>












    share|improve this question

























      0












      0








      0








      I'm building two forms which will live on a single page on a Kentico website. kentico websites are wrapped in one single form field so I can't create individual form elements for each form on the page. The problem is parsleyJS will only allow you to pass a form to initialise it e.g. $("#form").parsley(); and I need to validate the forms independent of each other. Has anyone had this issue before? Can anyone recommend a workaround.






      $("#form").parsley();

      input{
      display:block;
      }

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.1/parsley.min.js"></script>
      <form action="" id="form">
      <div class="form1">
      <label for="fname">First Name</label>
      <input type="text" name="fname" required>
      <label for="lname">Last Name</label>
      <input type="text" name="lname" required>
      <input type="submit" value="submit">
      </div>
      <div class="form2">
      <input type="text" name="anotherInput" required>
      <input type="submit" value="submit">
      </div>
      </form>












      share|improve this question














      I'm building two forms which will live on a single page on a Kentico website. kentico websites are wrapped in one single form field so I can't create individual form elements for each form on the page. The problem is parsleyJS will only allow you to pass a form to initialise it e.g. $("#form").parsley(); and I need to validate the forms independent of each other. Has anyone had this issue before? Can anyone recommend a workaround.






      $("#form").parsley();

      input{
      display:block;
      }

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.1/parsley.min.js"></script>
      <form action="" id="form">
      <div class="form1">
      <label for="fname">First Name</label>
      <input type="text" name="fname" required>
      <label for="lname">Last Name</label>
      <input type="text" name="lname" required>
      <input type="submit" value="submit">
      </div>
      <div class="form2">
      <input type="text" name="anotherInput" required>
      <input type="submit" value="submit">
      </div>
      </form>








      $("#form").parsley();

      input{
      display:block;
      }

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.1/parsley.min.js"></script>
      <form action="" id="form">
      <div class="form1">
      <label for="fname">First Name</label>
      <input type="text" name="fname" required>
      <label for="lname">Last Name</label>
      <input type="text" name="lname" required>
      <input type="submit" value="submit">
      </div>
      <div class="form2">
      <input type="text" name="anotherInput" required>
      <input type="submit" value="submit">
      </div>
      </form>





      $("#form").parsley();

      input{
      display:block;
      }

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.1/parsley.min.js"></script>
      <form action="" id="form">
      <div class="form1">
      <label for="fname">First Name</label>
      <input type="text" name="fname" required>
      <label for="lname">Last Name</label>
      <input type="text" name="lname" required>
      <input type="submit" value="submit">
      </div>
      <div class="form2">
      <input type="text" name="anotherInput" required>
      <input type="submit" value="submit">
      </div>
      </form>






      javascript forms kentico parsley.js






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 19 '18 at 11:59









      user3486427user3486427

      1239




      1239
























          2 Answers
          2






          active

          oldest

          votes


















          0














          You may be able to get the results you want using the group option to validate only part of the fields in your form. This is used in this example of a multi step form.






          share|improve this answer































            0














            Initialize the forms independent of one another by using the class selector.



            $(".form1").parsley();
            $(".form2").parsley();





            share|improve this answer
























            • You can only pass a form to parsley it will not accept a class unless it is on a form.

              – user3486427
              Nov 19 '18 at 14:45











            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53374179%2fvalidate-two-forms-inside-one-form-element-with-parsleyjs%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            2 Answers
            2






            active

            oldest

            votes








            2 Answers
            2






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            You may be able to get the results you want using the group option to validate only part of the fields in your form. This is used in this example of a multi step form.






            share|improve this answer




























              0














              You may be able to get the results you want using the group option to validate only part of the fields in your form. This is used in this example of a multi step form.






              share|improve this answer


























                0












                0








                0







                You may be able to get the results you want using the group option to validate only part of the fields in your form. This is used in this example of a multi step form.






                share|improve this answer













                You may be able to get the results you want using the group option to validate only part of the fields in your form. This is used in this example of a multi step form.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 19 '18 at 20:43









                Marc-André LafortuneMarc-André Lafortune

                62.7k12139158




                62.7k12139158

























                    0














                    Initialize the forms independent of one another by using the class selector.



                    $(".form1").parsley();
                    $(".form2").parsley();





                    share|improve this answer
























                    • You can only pass a form to parsley it will not accept a class unless it is on a form.

                      – user3486427
                      Nov 19 '18 at 14:45
















                    0














                    Initialize the forms independent of one another by using the class selector.



                    $(".form1").parsley();
                    $(".form2").parsley();





                    share|improve this answer
























                    • You can only pass a form to parsley it will not accept a class unless it is on a form.

                      – user3486427
                      Nov 19 '18 at 14:45














                    0












                    0








                    0







                    Initialize the forms independent of one another by using the class selector.



                    $(".form1").parsley();
                    $(".form2").parsley();





                    share|improve this answer













                    Initialize the forms independent of one another by using the class selector.



                    $(".form1").parsley();
                    $(".form2").parsley();






                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Nov 19 '18 at 14:06









                    Brenden KehrenBrenden Kehren

                    4,347922




                    4,347922













                    • You can only pass a form to parsley it will not accept a class unless it is on a form.

                      – user3486427
                      Nov 19 '18 at 14:45



















                    • You can only pass a form to parsley it will not accept a class unless it is on a form.

                      – user3486427
                      Nov 19 '18 at 14:45

















                    You can only pass a form to parsley it will not accept a class unless it is on a form.

                    – user3486427
                    Nov 19 '18 at 14:45





                    You can only pass a form to parsley it will not accept a class unless it is on a form.

                    – user3486427
                    Nov 19 '18 at 14:45


















                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53374179%2fvalidate-two-forms-inside-one-form-element-with-parsleyjs%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Guess what letter conforming each word

                    Port of Spain

                    Run scheduled task as local user group (not BUILTIN)