Question

I would like to stop the submit button function, when we got any error in HTML form elements (like captcha). We have several functions in our script, let me explain in details.

1. Check the data validation only captcha security code configured with PHP (through – jquery-1.3.2.js && – validate.js)
2. Send data through AJAX call (through – ajaxSubmit.js)

now i would like to stop the script, when any of the user filled the wrong value in Captcha text. we just simply disable the submit button and get message (“Form Not Filled Properly…”)

UPDATED VALIDATION – please check only with Captcha codes

 <script type="text/javascript">

$.validator.addMethod('myEqual', function (value, element) {
 if ($('#password-password').val() == $('#password-password-confirm').val()) {
      return true;
 }    else return false;
}, 'Your password does not match.');




  $(document).ready(function() {

 $('#password-clear').show();
$('#password-password').hide();

$('#password-clear').focus(function() {
    $('#password-clear').hide();
    $('#password-password').show();
    $('#password-password').focus();
});
$('#password-password').blur(function() {
    if($('#password-password').val() == '') {
        $('#password-clear').show();
        $('#password-password').hide();
    }
});

    $('#password-clear-confirm').show();
$('#password-password-confirm').hide();

$('#password-clear-confirm').focus(function() {
    $('#password-clear-confirm').hide();
    $('#password-password-confirm').show();
    $('#password-password-confirm').focus();
});
$('#password-password-confirm').blur(function() {
    if($('#password-password-confirm').val() == '') {
        $('#password-clear-confirm').show();
        $('#password-password-confirm').hide();
    }
});


var validator = $("#signupform").validate({

    //ignore: ".ignore",

    rules: {

        username: {
            required: true,
            minlength: 5
        },

        captcha: {
            required: true,
            remote: "includes/process.php"
        },

        password: {
            required: true,
            minlength: 5
        },
        passwordconfirm: {
            required: true,
            minlength: 5,
            myEqual: true
        },

        email: {
            required: true,
            email: true
        }
    },
    messages: {


        captcha: "Correct captcha is required. Click the captcha to generate a new one",
        username: {
            required: "Enter a username",
            minlength: jQuery.format("Enter at least {0} characters"),

        },
        password: {
            required: "Provide a password",
            rangelength: jQuery.format("Enter at least {0} characters")
        },
        passwordconfirm: {
            required: "Provide a password",
            rangelength: jQuery.format("Enter at least {0} characters")
        },
    email: {
            required: "Please enter a valid email address",
            minlength: "Please enter a valid email address"
        }


    },
    // the errorPlacement has to take the table layout into account
    errorPlacement: function(error, element) {
        if ( element.is(":radio") )
            error.appendTo( element.parent().next().next() );
        else if ( element.is(":checkbox") )
            error.appendTo ( element.next() );
        else

            error.appendTo( element.parent().next() );
    },

            submitHandler: function() {
        alert("submitted!");
    },

    // specifying a submitHandler prevents the default submit, good for the demo
    // set this class to error-labels to indicate valid fields
    success: function(label) {
        // set &nbsp; as text for IE
        label.html("").addClass("checked");
                      //  form.submit();
    }
});

 });

Please suggest me proper code for our requirement.

Answer 1

With jQuery:

$("#formid").submit(function (){
  if(!your condition){
    return false;
  }
});