jQuery validation Engine properties not working

Question

I'm trying to validate my form using jQuery validate engine before sending the ajax request. But if form contains the error also ajax sends the request.

JavaScript:

$('#addphrase').validationEngine('attach', {
    inlineValidation: false,
    promptPosition: "centerRight",
    onSuccess: function () {
        use_ajax = true;
        alert(dcd);
    },
    onFailure: function () {
        use_ajax = false;
        alert(ggg);
    }
});

$('form[name="addphrase"]').submit(function (e) {
    if (use_ajax) {
        $('#loading1').css('visibility', 'visible');
        $.get('addphrase.php', $(this).serialize() + '&ajax=1',

        function (data) {
            if (parseInt(data) == -1) {
                $("#resp1").show('slow').after('<p id="resp-mes1" style=" color:#000000; text-decoration: bold;">* Please ensure all fields are filled.","error"</p>');
            } else {
                $("#resp1").show('slow').after('<p id="resp-mes1" style=" color:#000000; text-decoration: bold;">Added successfully. Thank You...</p>');
            }
            $('#loading1').css('visibility', 'hidden');
            setTimeout("jQuery('#resp1').hide('slow');", 3000);
            setTimeout("jQuery('#resp-mes1').hide('slow');", 5000);
        });
    }
    e.preventDefault();
}
});

Edit HTML

  <form class="form-horizontal" id="addphrase" name="addphrase" method="GET" action="">
            <div class="control-group"><label class="control-label" for="form-field-1">Phrase</label>
  <div class="controls">
  <input type="text" id="phrase" class="validate[required]" placeholder="Phrase" name="Phrase" value="" /></div></div>
  <div class="control-group"><label class="control-label" for="form-field-11">Content Here</label>
  <div class="controls">
  <textarea name="post_content"  value="" class="validate[required] autosize-transition span12" id="comment" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 67px;"></textarea></div></div>
  <div class="space-4"></div><div class="control-group" style="float:left; margin-right:25px"><div class="controls">
  <button type="submit" class="btn btn-info">
 <i class="icon-ok bigger-110"></i>
 <input type="submit" value="" id="phsubmit" style="opacity:0">Submit</button>
 <button type="reset" class="btn"><i class="icon-undo bigger-110"></i>Reset</button></div></div>
 <div id="resp1" style="float:left; margin-top:5px"><img id="loading1" style="visibility:hidden;" src="assets/img/ajax-load.gif" width="16" height="16" alt="loading" /></div></div>
</form>

In above code it won't show alert and it won't attach the property,in both case if it is failure or success.

Any help would be appreciated.

Is you form name and id are same? Put your html code — Ajith S
– Ajith S, Commented Oct 17, 2013 at 5:57

Rohan Kumar · Accepted Answer · 2013-10-17 06:35:37Z

1

Try to use onValidationComplete like,

$('#addphrase').validationEngine('attach', {
    inlineValidation: false,
    promptPosition: "centerRight",
    onValidationComplete: function (form, status) {
        if (status) {
            alert('Form submit');
            $('#loading1').css('visibility', 'visible');
            $.get('addphrase.php', $(this).serialize() + '&ajax=1',

            function (data) {
                if (parseInt(data) == -1) {
                    $("#resp1").show('slow').after('<p id="resp-mes1" style=" color:#000000; text-decoration: bold;">* Please ensure all fields are filled.","error"</p>');
                } else {
                    $("#resp1").show('slow').after('<p id="resp-mes1" style=" color:#000000; text-decoration: bold;">Added successfully. Thank You...</p>');
                }
                $('#loading1').css('visibility', 'hidden');
                setTimeout("jQuery('#resp1').hide('slow');", 3000);
                setTimeout("jQuery('#resp-mes1').hide('slow');", 5000);
            });
        }
        else
        {
            alert('Error');
        }
    },
});

Read Docs

Demo

edited Oct 17, 2013 at 6:35

answered Oct 17, 2013 at 5:58

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

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

1 Comment

James Over a year ago

What happening here is

promptPosition: "centerRight",     onSuccess: function () {         use_ajax = true;         alert(dcd);         $('#addphrase').submit();// submit form here     },     onFailure: function () {         use_ajax = false;         alert(ggg);     }

These line are not executing at all. Please tell me is any mistake have in those lines

Collectives™ on Stack Overflow

jQuery validation Engine properties not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related