CODEWITHSUNDEEP
javascriptjqueryhtmljquery-validatejquery-ui-dialog
Alessandro
Alessandro

Reputation: 4472

JQuery validation on inner form (dialog)

I've a jsp with a form that include another jsp with a div (that's a JQuery dialog) and in the dialog I've a form that I've to validate.

My issue is: I cannot create an inner form opened in a dialog. So when I try to validate it, I get following error: Uncaught TypeError: Cannot read property 'form' of undefined.

See following snippet, please:

<html>
<head>  
  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
  <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
</head>
<body>
  <form id="extForm">
    <div id="myDialog">
      <form id="intForm">
        <label for="field1">Don't write anything in textbox, just click the button</label>
        <input type="text" id="field1" required>
      </form>
    </div>
  </form>
</body>
<script>
  $("#myDialog").dialog({
    autoOpen: false,
    modal: true,
    title: "myDialog",
    buttons: {
      "Click me": function(){
        $("#myDialog form").valid();
      }
    }
  });
  $("#myDialog").dialog("open");
</script>
</html>

If I remove the external form, it works fine. I can I solve this? Thanks.

Note: I can't remove the external form and I have to validate only the fields inside my dialog.

Upvotes: 0

Views: 674

Answers (2)

Alessandro
Alessandro

Reputation: 4472

I solved wrapping dialog inside a form, using option create:

create: function(){ formDialog = $(this).wrap($('')).parent(); }

This is the result:

<html>
<head>  
  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
  <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
</head>
<body>
  <form id="extForm">
    <div id="myDialog">
        <label for="field1">Don't write anything in textbox, just click the button</label>
        <input type="text" id="field1" required>
    </div>
  </form>
</body>
<script>
  var formDialog;
  $("#myDialog").dialog({
    autoOpen: false,
    modal: true,
    title: "myDialog",
    create: function(){
      formDialog = $(this).wrap($('<form>')).parent();
    },
    buttons: {
      "Click me": function(){
        formDialog.valid();
      }
    }
  });
  $("#myDialog").dialog("open");
</script>
</html>

Thanks to all.

Upvotes: 0

Archi
Archi

Reputation: 495

You are getting that error because when you call $("#myDialog").dialog() function of jQuery, myDialog div loses the form from it's inner html.

Please put html back after dialog and before open dialog functions

e.x.

<script>
    $("#myDialog").dialog({
        autoOpen: false,
        modal: true,
        title: "myDialog",
        buttons: {
            "Click me": function(){
                $("#myDialog form").valid();
            }
        }
    });

$("#myDialog").html("<form id='intForm'><label for='field1'>Don\'t write anything in textbox, just click the button</label><input type='text' id='field1' required></form>");

    $("#myDialog").dialog("open");
</script>

This code should run fine!

Thank you

Upvotes: 1

Related Questions