How to dissable a button while validating a form in laravel using jquery

Question

I want my Submit button disable until the elements in the form are not filled..!

I am using Laravel 5.4

There are only 3 fields out of which one is textbox and another is email and another is a select with options. Here is my Form..!

{{ Form::open(array('url' => 'student', 'id' => 'frmReg')) }}

<div class="form-group">
    <label>Name:</label>
    <input type="text" name="name" id="name" class="form-control">
    <div id="aName" style="color:red"></div>
</div>

<div class="form-group">
    <label>Email:</label>
    <input type="email" name="email" id="email" class="form-control">
    <div id="aEmail" style="color:red"></div>
</div>

<div class="form-group">
    <label id="gen">Gender:</label>
    <br>
    <select name="gender">
        <option value="Male">Male</option>
        <option value="Female">Female</option>
    </select>

</div>
<button class="btn btn-primary" id="sub">Create a student</button>
{{ Form::close() }}

Here is my jQuery script

<script>
var isValid=0;
    $(document).ready(function(){
       $("#frmReg").validate({
            rules: {
                name: {
                    required: true
                },
                email: {
                    required: true
                }
            },
            messages: {
                name: "Name is Empty",
                email: "Enter a valid Email ID..!"
            },
            submitHandler: function(form) { // <- pass 'form' argument in
                $("#sub").attr("disabled", true);
                form.submit(); // <- use 'form' argument here.
            }
        });
});
</script>

add type="submit" to your button. Read more from this stackoverflow.com/questions/30720354/… — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented May 9, 2017 at 5:46
try either check if your have any errors in your console or add a console.log("trigger") inside your submitHandler. — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented May 9, 2017 at 5:49
@CarstenLøvboAndersen the problem is its not going into the submithandler — Jay Momaya
– Jay Momaya, Commented May 9, 2017 at 6:13

Shakti Sisodiya · Accepted Answer · 2017-05-09 06:03:08Z

1

Just look at this code and place it where you are submiting your form dont use document.ready function.

$(document).on('click','#youBtnIdHere',function(){
 $("#frmReg").validate({
            rules: {
                name: {
                    required: true
                },
                email: {
                    required: true
                }
            },
            messages: {
                name: "Name is Empty",
                email: "Enter a valid Email ID..!"
            },
            submitHandler: `enter code here`function() { 
                $("#sub").attr("disabled", true);
                 $("#frmReg").submit(); 
            }
        }); });`

OR you can also set in your blad code like this way

    {{ Form::open(array('url' => 'student', 'i`enter code here`d' => 'frmReg','onsubmit' => '$("#yourBtnId").prop("disabled",true)')) }}

Hope this will help you

answered May 9, 2017 at 6:03

Shakti Sisodiya

2283 gold badges5 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shakti Sisodiya Over a year ago

and please follow proper way to validate email like email:{required:true,email:true}

Collectives™ on Stack Overflow

How to dissable a button while validating a form in laravel using jquery

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related