Jquery form validation not working?

Question

I hope someone can help me with some jquery script that I have been building up over a while. The script works and posts some form data to a mysql database successfully.

The problem I have is I'm trying to implement form validation but I cannot get the validation to work and I suspect that I am placing a bracket incorrectly somewhere. The script I post here works but the form validation doesn't. Any help greatly appreciated.

$(document).ready(function() {
$("#your_results").hide();
$("#your_data").hide();
$("#submitButtonId").on("click", function(e) {
    $('#gauge').empty();
    e.preventDefault();

    //Validate the input

    $(function() {
        $("#myform").validate({
});

        //Post the form if field has been completed

        var formdata = $('#myform').serialize();
        $.post('php_includes/insert.php', formdata,
            function(data) {

                //Reset Form

                $('#myform')[0].reset();
                fetchRowCount();
            });

        return false;
    });
});

//Fetch data from server

function fetchRowCount() {
    $.ajax({
        url: 'php_includes/server.php',
        dataType: "json",
        success: function(data) {
            $("#rows").html(data.rows);
            $("#min").html(data.min);
            $("#max").html(data.max);
            $("#mean").html(data.total);
            $("#last").html(data.last_entry);

            //Show gauge once json is received from server

            var gage = new JustGage({
                id: "gauge",
                value: data.total,
                min: data.min,
                max: data.max,
                title: "Sample Data"


            });
            $("#your_results").fadeIn("slow");
            $("#your_data").fadeIn("slow");
            //Scroll to Gauge
            $('html, body').animate({
                scrollTop: $('#results').offset().top
            }, 'slow');
            $("#gauge").fadeIn(slow);

        }

             });
               }
            });

myform

<form class="form-inline" action="" id="myform" form="" method="post">

            <!-- Text input-->
            <div class="form-group">
                <label class="col-md-4 control-label" for="bill_cost"></label>
                <div class="col-md-8">
                    <input id="bill_cost" name="bill_cost" type="text" placeholder="Bill Cost" class="form-control input-lg">

                </div>
            </div>
 <!-- Button -->
            <div class="form-group">
                <label class="col-md-4 control-label" for="submit1"></label>
                <div class="col-md-4">
                    <input type="submit" id="submitButtonId" name="submit1" class="btn btn-primary btn-xl" value="Submit">


                </div>
            </div>
</form>

Results displayed here

<div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
 <!-- RESULTS HERE -->
<div id="your_results"></div>
 <!-- .GAUGE HERE -->
<div id="gauge" class="300x260px"></div>

can you show your markup as well?

Josh
– Josh

2016-04-29 22:42:27 +00:00
Commented Apr 29, 2016 at 22:42 — Josh
– Josh, Commented Apr 29, 2016 at 22:42
I've added the form which I hope helps.

JulianJ
– JulianJ

2016-04-29 22:46:16 +00:00
Commented Apr 29, 2016 at 22:46 — JulianJ
– JulianJ, Commented Apr 29, 2016 at 22:46

Redmega · Accepted Answer · 2016-04-30 13:34:04Z

1

If you properly indent your code the problem would become apparent:

$(function() {
    $("#myform").validate({});

    //Post the form if field has been completed

    var formdata = $('#myform').serialize();
    $.post('php_includes/insert.php', formdata,
        function(data) {

            //Reset Form

            $('#myform')[0].reset();
            fetchRowCount();
        });

    return false;
});

You are wrapping your validate function in a $(handler) (A JQuery object, when passed a function, becomes shorthand for $(document).ready(handler);. So you're running your validation on document ready and not when you click your submit button.

answered Apr 30, 2016 at 13:34

Redmega

6915 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

Jquery form validation not working?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related