jquery validation plugin not working with file

0
votes

I'm using jquery validation plugin to validate a form. It is working if all fields are left blank. But if I entered a file in the input field and leave blank the other required fields it doesn't validate the other elements anymore it just submit the form to the server.

<script>
$().ready(function() {
    $("#form1").validate({
        submitHandler: function (form) {
            $.ajax({
                type: $(form).attr('method'),
                url: $(form).attr('action'),
                data: $(form).serialize(),
            })
            .done(function (response) {
                jAlert(response);      
            });
            return false; 
        },
        ignore: [],  
        rules: {
            title: {    required: true, minlength: 2,   maxlength: 25 },
            text1: {
                required: function() {
                    CKEDITOR.instances.text1.updateElement();
                }
            },
            text2: {
                required: function() {
                    CKEDITOR.instances.text2.updateElement();
                }
            },
            newsimage: {
                required: true,
                accept: "image/*"
            },
        },
        messages: {
            title: {
                required: "Please enter the Title",
                minlength: "Title must consist of at least 2 characters"
            },
            text1: {
                required: "Please enter text",
                minlength: "Must consist of at least 2 characters"
            },
            text2: {
                required: "Please enter text",
                minlength: "Must consist of at least 2 characters"
            }
        }
    });
});
</script>

Here's the form

<form id="Form1" enctype="multipart/form-data" method="post" action="save.php" >

    Title: <input name="title" size="40" maxlength="255"> 
    <br>
    <label for="newsimage">News Image</label>
    <input type="file" id="newsimage" name="newsimage">

    <br> News Summary:
    <textarea id="text1" name="text1" rows="7" cols="30"></textarea>

    <script type="text/javascript">
            CKEDITOR.replace( 'text1' );
    </script>
    <br> News Full Story:
    <textarea id="text2" name="text2" rows="7" cols="30"></textarea>
    <script type="text/javascript">
            CKEDITOR.replace( 'text2' );
    </script>
    <br> <input type="submit" name="submit" value="Add News">

4
javascriptjqueryhtmlformsvalidation
seems fine jsfiddle.net/arunpjohny/hwfkn0v7/2 - you need to return true from the required callback methods - Arun P Johny
something wrong with my code, it is not working, remove ckeditor, and even copied what you put in jsfiddle but it is still the same problem. - fyeth fyeth

4 Answers

0
votes

You could use required on your form tags like this :

<input name="title" size="40" maxlength="255" required>

that should force some input. ( it is not sanitized )

0
votes

It wasn't working on my end because I was missing additional-methods.js, so adding it solve the problem.

<script src="js/additional-methods.min.js"></script>
0
votes

in order to activate any jquery validation library first of all you need to define that library below jquery cdn. your structure should be like this:

<!-- define jquery file -->
<!-- Now define jquery validation library -->

for a safer side define you jquery file on header and your validation library after main code.