How to validate inputs inside form and submit button outside the form

Question

Based on requirement I am trying to validate the form.

Actually I am passing form input elements in bootbox modal dialog and passing submit button dynamically in modal dialog.

When input type=submit is there it is able to validate form inputs.But is there is no submit button inside form as i am passing it in modal, it is not able to validate form. For example:

<form id="form_id">
Name:<input type="text" required>
<input type="submit" value="Submit">
</form>

$("#form_id").submit(function(e)){
//validation is ok
return false;
}

this is ok but, now in modal:

    var data="<form id="form_id">
    Name:<input type="text" required>
    </form>"; //getting from server

            $.ajax({
            url : 'url',
            type : 'get',
            async : true,
            data : data,
            success : function(data) {
                modalDialog = bootbox.dialog({
                    size : 'large',
                    title : "Title"
                    show : false,
                    message : data,
                    buttons : {
                        success: {
                            label : "Close window",
                            className : "btn-default",
                            callback : function() {
  return false;
        //after clicking submit button it should ask required if no data input,and stay in dialog as what happened previous scenario.But dialog is closed.

                            }
                        }
                    }
                });
                modalDialog.on('shown.bs.modal', function() {
                });

                modalDialog.modal('show');

            }

        });

You can check the form with `.checkValidity()`: [Triggering HTML5 Form Validation](http://stackoverflow.com/questions/7548612/triggering-html5-form-validation) — Andreas, Sep 30 '16 at 04:56

score 1 · Accepted Answer · answered Sep 30 '16 at 04:55

1

Try like this

Add required to your input type in html

 <form id="frmPlate">
    <input type="text" name="Name" required="required" />
</form>
<button type="submit" onclick="CheckValidation();"> Submit</button>

And you can validate in jquery like below code

function CheckValidation(){
    var frmvalid = $("#frmPart").valid();
    if (!frmvalid) {
        return false;
    }
}

answered Sep 30 '16 at 04:55

Bharat

2,441
3
24
36

Previously I was not using jquery validator plugin. Now I added andit works fine.Answer Accepted. – Joe Sep 30 '16 at 05:49

Rohith K N · Answer 2 · 2016-09-30T05:14:38.060

0

when all the conditions are met use JavaScript to submit the form.

document.getElementById('form_id').submit();

or in jquery

("#'form_id'").submit();

Now here is your code with "submit" added to it

    var data="<form id="form_id">
Name:<input type="text" required>
</form>"; //getting from server

        $.ajax({
        url : 'url',
        type : 'get',
        async : true,
        data : data,
        success : function(data) {
            modalDialog = bootbox.dialog({
                size : 'large',
                title : "Title"
                show : false,
                message : data,
                buttons : {
                    success: {
                        label : "Close window",
                        className : "btn-default",
                        callback : function() {

("#'form_id'").submit();
  return false;
        //after clicking submit button it should ask required if no data input,and stay in dialog as what happened previous scenario.But dialog is closed.

                        }
                    }
                }
            });
            modalDialog.on('shown.bs.modal', function() {
            });

            modalDialog.modal('show');

        }

    });

edited Sep 30 '16 at 05:14

answered Sep 30 '16 at 04:49

Rohith K N

845
6
17

Previously i was doing that way but buddies say for one submit you are creating two buttons? So I have posted the query. I had hidden submit with id and after clicking outside button i was triggering the submit. – Joe Sep 30 '16 at 04:51
1

I think you don't need the real submit button (one inside the form) for the above code to work. – Rohith K N Sep 30 '16 at 04:53
See this question: http://stackoverflow.com/questions/17784936/submit-a-form-without-using-submit-button – Rafael Emshoff Sep 30 '16 at 04:54
I mean even with out '" you may be able to force the submit. – Rohith K N Sep 30 '16 at 04:54
But second one there is no $("#form_id").submit(function(e)){}); Only operations like ajax. Then how validation will be performed? – Joe Sep 30 '16 at 05:02

How to validate inputs inside form and submit button outside the form

2 Answers2