CODEWITHSUNDEEP
javascriptjqueryvalidation
Harsha M V
Harsha M V

Reputation: 54949

Stopping Form to be submitted

I have a form which on submit should see if the text area has no text or the place holder text.

iif it does it shouldn't submit it. something like validation. I am not able to stop the form submission.

$(document).ready(function () {
    var options = {
        target: '.user-status',
        // target element(s) to be updated with server response 
        beforeSubmit: showRequest,
        // pre-submit callback 
        success: showResponse,
        // post-submit callback 
        // other available options: 
        //url:       url         // override for form's 'action' attribute 
        //type:      type        // 'get' or 'post', override for form's 'method' attribute 
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
        //clearForm: true        // clear all form fields after successful submit 
        resetForm: true // reset the form after successful submit 
        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    };

    $('#updateStatus').submit(function () {
        $(this).ajaxSubmit(options);
        return false; // prevent a new request
    });

    function showRequest(formData, jqForm, options) {

        var textbox = $('#StatusMessageMessage').val();
        if ((textbox == '') || (textbox == "What have you been eating ?")) {
            alert(text);
            return false;
        } else {
            $('#StatusMessageMessage').attr('disabled', true);
        }

    }

    function showResponse(responseText, statusText, xhr, $form) {
        $('#StatusMessageMessage').attr('disabled', false);
    }

    statusMEssagebox();


});



function statusMEssagebox() {
    var textholder = $('#StatusMessageMessage').val();

    $('#StatusMessageMessage').focus(function () {
        if ($(this).val() == textholder) $(this).val("");

        $(this).animate({
            "height": "48px",
        }, "fast");
        $('.share').slideDown("fast");
        $(this).TextAreaExpander(48, 75);

    });

    $('#StatusMessageMessage').blur(function () {
        if ($(this).val() == "") {
            $(this).val(textholder);
            $('.share').slideUp("fast");
            $(this).animate({
                "height": "18px",
            }, "fast");
        }
    });
}

Upvotes: 0

Views: 126

Answers (2)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038850

I see that you are using the jquery form plugin to ajaxify your form. There's an example in the documentation illustrating how to achieve this in an elegant way. You don't need to subscribe for the .submit event of the form and manually submit it using .ajaxSubmmit. You could simply try this:

$(function() {
    $('#updateStatus').ajaxForm({ 
        beforeSubmit: function(formData, jqForm, options) {
            var value = $('#StatusMessageMessage').val();
            if (value == '' || value == 'What have you been eating ?') {
                return false;
            }
        }
    });
});

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382716

You are using equality operator rather than comparison.

This:

if ((textbox = '') || (textbox = "What have you been eating ?")) {
Problem -----^

Should be:

if (textbox == '' || textbox == "What have you been eating ?") {

You may also want to see how the submit form via Ajax using jQuery:

Upvotes: 1

Related Questions