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 http://stackoverflow.com/questions/30720354/jquery-validate-submithandler-not-firing — Carsten Løvbo Andersen, May 09 '17 at 05: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, May 09 '17 at 05:49
@CarstenLøvboAndersen the problem is its not going into the submithandler — Jay Momaya, May 09 '17 at 06:13

score 1 · Accepted Answer · answered May 09 '17 at 06:03

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

and please follow proper way to validate email like `email:{required:true,email:true}` — Shakti Sisodiya, May 09 '17 at 06:05

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

1 Answers1