CODEWITHSUNDEEP
javascriptphpcodeigniter
Remn
Remn

Reputation: 261

Required attribute not working using javascript submit

I make some form different action within different button

<form id="form" method="post" class="form-horizontal" enctype="multipart/form-data">
    <input name="name" class="form-control" type="text" required>
</form>
<button type="button" class="btn btn-primary" onClick="submitForm('<?php echo base_url('order/add');?>')">Submit</button>
<button type="button" class="btn btn-warning" onClick="submitForm('<?php echo base_url('order/print');?>')">Print</button>

Javascript

function submitForm(action)
{
    document.getElementById('form').action = action;
    document.getElementById('form').submit(

    );
}

Then, my required attribute not working. Did I do something wrong? Let me know if there is other solution. Thanks,

Upvotes: 4

Views: 6835

Answers (4)

Quinn Comendant
Quinn Comendant

Reputation: 10536

Using javascript's form.submit() function will cause input validation to be bypassed (according to the HTML specification in point 4 of the form submission algorithm). The only way to trigger HTML input validation is to use a click event on a submit button inside the form, either by the user actually clicking, or in javascript with something like form.querySelector('input[type="submit"]').click().

Upvotes: 0

Răducanu Ionuţ
Răducanu Ionuţ

Reputation: 430

I can't give you a good explanation but you need the submit buttons inside the form.

So if you would have a button like: <input type="submit" value="Submit">, it will trigger the required attribute.

@Remn If you would still stay on your structure with submit inside a function you could trigger yourself the validation like: 

if ($("form")[0].checkValidity())
{
   $("form").submit()
}

and then do something with inputs that are invalid by passing through each required element ( input is set in code ):

$('form :input[required="required"]').each(function()
      {
        if(!this.validity.valid)
        {
            $(this).focus();
            // break
            return false;
        }
    });

In the below case the invalid inputs will be focused one by one.

The whole code is:

$( function () {
    $("body").on("click", "#trigger", function() {

    if ($("form")[0].checkValidity())
    {
        $("form").submit()
    }

      $('form :input[required="required"]').each(function()
      {
        if(!this.validity.valid)
        {
            $(this).focus();
            // break
            return false;
        }
    });
  });
});

Where #trigger is an id I set on the button to submit, you can make your own functions to achieve your goal I just used on().

I hope it helps!

Upvotes: 3

Razib Al Mamun
Razib Al Mamun

Reputation: 2711

Please try bellow code. i hope solve your problem.

<html>
  <head>
        <title>Submit</title>
        <script type="text/javascript" language="javascript">
                function submitForm(action)
                {
                    document.getElementById('form').action = action;
                    document.getElementById('form').submit(

                    );
                    //alert(document.getElementById('form').action);
                }
        </script>
  </head>
  <body>
        <form id="form" method="get" class="form-horizontal" enctype="multipart/form-data">
            <input name="name" class="form-control" type="text" required="required">
            <button type="submit" class="btn btn-primary" onclick="return submitForm('<?php echo base_url('order/add');?>');" id="submit">Submit</button>
            <button type="submit" class="btn btn-warning" onclick="return submitForm('<?php echo base_url('order/print');?>');" id="print">Print</button>
        </form>
  </body>
</html>

Upvotes: 3

Ahmer Saeed
Ahmer Saeed

Reputation: 596

I have test your code by adding Javascript part in Script tag it is working fine. And i tested it on Chrome Windows 10.

       <form id="form" method="post" class="form-horizontal" enctype="multipart/form-data">
           <input name="name" class="form-control" type="text" required>
       </form>
       <button type="button" class="btn btn-primary" onClick="submitForm('<?php echo base_url('order/add'); ?>')">Submit</button>
       <button type="button" class="btn btn-warning" onClick="submitForm('<?php echo base_url('order/print'); ?>')">Print</button>
       <script>
         function submitForm(action) {
              document.getElementById('form').action = action;
              document.getElementById('form').submit();
         }
      </script>

Upvotes: 0

Related Questions