CODEWITHSUNDEEP
javascriptjqueryhtmlformsjquery-validate
Sid
Sid

Reputation: 2862

Form is not getting validate

I have created one form to add a record in database, so insertion of record and all is working well.

I wanted to put the validation for the form, now what happening is though I have set the fields as required then also after clicking on submit button the form is getting submit and blank values are getting insert n database.

I have referred this link for validation :

A simple jQuery form validation script

But somehow its not working for me.

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Post</title>

</head>
<body>

<form class="postForm" id="postForm" method="post" action="addPost.php">


    <fieldset>
        <legend>Please add the details below </legend>
        <p>
            <label for="title">Title (required, at least 2 characters)</label>
            <input id="title" name="title" minlength="2" type="text" required>
        </p>

        <p>
            <label for="url">URL (required)</label>
            <input id="url" type="url" name="url" required>
        </p>

        <p>
            <label for="desc">Description (required, at least 2 characters)</label>
            <input id="desc" name="desc" minlength="2" type="text" required>
        </p>

        <p>
            <label for="keywords">Keywords (eg:#facebook)(required, at least 2 characters)</label>
            <input id="keywords" name="keywords" minlength="2" type="text" required>
        </p>

        <p>

            <label for="urlType">Select Url Type :(required)</label>
            <select name="urlType" id="urlType">
                <option value="">Select Url Type...</option>
                <option value="0">Server Image</option>
                <option value="1">Server Video</option>
                <option value="2">YouTube Video</option>
                <option value="3">Vimeo Video</option>
                <option value="4">Facebook Image</option>
                <option value="5">Facebook Video</option>
                <option value="6">Instagram Image</option>
                <option value="7">Instagram Video</option>
                <option value="-1">Other</option>
            </select>
        </p>

        <p>


            <label for="postType"> Select Post Type :(required)</label>
            <select name="postType" id="postType">
                <option value="">Select Post Type...</option>
                <option value="0">Normal</option>
                <option value="1">Featured</option>
                <option value="2">Sponsored</option>

            </select>
        </p>
        <p>


            <label for="category"> Select Category :(required)</label>
            <select name="category" id="category">
                <option value="0">Select Category...</option>

            </select>
        </p>



        <p>
            <input type="hidden" name="action_type" id="action_type_id"/>
            <input type="hidden" name="id" id="p_id"/>
<!--            <a href="javascript:void(0);" class="btn btn-warning" onclick="$('#postForm').slideUp();">Cancel</a>
            <a href="javascript:void(0);" class="btn btn-success" onclick="userAction('add')">Add User</a>-->
           <input type="button" name="Submit" id="Submit" value="Submit" onclick="userAction('add')">


        </p>

    </fieldset>

    <div class="result" id="result"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>

        $(document).ready(function(){
            getCategories();
        });

        function getCategories() {

            $.ajax({
                type: "POST",
                url: 'getCategories.php',
                dataType: 'text',
                async: false,
                cache: false,
                success: function (result) {

                    $('#category').html(result);
                }
            });
        }
        function userAction(type,id){

            var statusArr = {add:"added",edit:"updated",delete:"deleted"};

            if (type == 'add') {

                $('#action_type_id').val(type);
                $('#p_id').val(id);
            }
            $.ajax({
                type: 'POST',
                url: 'addPost.php',
                data: $('#postForm').serialize(),
                success:function(report){
                    // replace data to report
                    $(".result").html(report);

                    $("#postForm").trigger('reset');
                }
            });
        }

    </script>
</form>
<script>
    $("#postForm").validate();
</script>
</body>
</html>

Please help, thank you..

Upvotes: 0

Views: 68

Answers (2)

shivam Gupta
shivam Gupta

Reputation: 441

Need reference to jquery validate

  <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

Then need to initialize plugin, demo example - 

  $('#postForm').validate({
    submitHandler: function (form) { // for demo
        userAction('add');
    }
});

remove onclick you are firing onsubmit , need to call userAction from submitHandler

Demo http://jsfiddle.net/xs5vrrso/

Upvotes: 1

Arun Kumar
Arun Kumar

Reputation: 163

The submit button's type should be 'submit'. Hope this helps.

Upvotes: 0

Related Questions