CODEWITHSUNDEEP
jqueryhtmlfunction
Craig cannon
Craig cannon

Reputation: 19

jQuery. Fn.Function causing other functions to fail?

I'm new to jQuery, I've followed a few tutorials about writing fn functions and my first one worked; however when I add a second fn function the entire script stops working. I'd appreciate any feedback or solutuion to my problem. I've included my jQuery and also the HTML form I'm using.

At it's current form it's solely meant to stop the page refreshing when the user presses "Submit" however since adding "jQuery.fn.clear" it's stopped doing this.

$(document).ready(function () {

    // Length validation
    jQuery.fn.validate = function (clength, value) {
        if ($.trim($(this).val()).length < clength || $.trim($(this).val()) == value) {
            $(this).val("You can't leave this blank!");
            return false;
        } else {
            return false;
        }
    };

    // Default value validation
    jQuery.fn.clear = function () {
        var value = $.trim($(this).val());
        if (value == "You can't leave this blank" || value == "Name" || value == "Email Address"
        value == "Telephone") {
            $(this).val("");
        }
    };

    $(function () {
        $(".submit-button").click(function () {
            $("#send-name").validate(1, "Name");
            $("#send-mail").validate(6, "Email Address");

            $(".spinny").fadeTo(0, 1);
            $(this).attr('value', 'Validating...');
            return false;
        });
    });
});

<form method="POST" action="">
    <div class="left">
        <label for="name">What's your name?</label>
        <input type="text" id="send-name" name="name"
        id="name" class="watermark" size="40" value="Name" />
        <br />
        <label for="email">Your Email</label>
        <input type="text" id="send-mail" name="email" size="40"
        class="watermark" Value="Email Address" />
        <br />
        <label for="number">Your contact number</label>
        <input type="text" id="send-number" name="number"
        size="40" class="watermark" value="Telephone" />
        <br />
    </div>
    <div class="right">
        <label for="message">How can I help?</label>
        <textarea name="message" id="message" class="watermark"
        cols="40" rows="10" title="Message"></textarea>
        <br />
        <Br />
        <img src="_img/spinny.gif" class="spinny" />
        <input type="submit" class="submit-button" value="Submit" />
    </div>
</form>

Upvotes: 2

Views: 419

Answers (2)

Guffa
Guffa

Reputation: 700342

You are missing an operator here:

value == "Email Address"  value == "Telephone"

should be:

value == "Email Address" || value == "Telephone"

Also, you are missing the ending }); for your ready event handler. However, you don't have to declare the extensions in a ready handler at all.

Upvotes: 0

ThiefMaster
ThiefMaster

Reputation: 318508

You forgot }); before $(function () {. You also forgot an || before value == "Telephone"

Actually, simply remove $(function () { - there is no reason to begin a new document-ready block when you already have one!

$(document).ready(function () {

    // Length validation
    $.fn.validate = function (clength, value) {
        ...
    };

    // Default value validation
    $.fn.clear = function () {
        ...
    };


    $(".submit-button").click(function () {
        ...
    });
});

Some other suggestions to improve your code:

  • $(this).attr('value' is bad. Always use .val() to get/set the value of an element.
  • Do not write jQuery more than once. If you want your code to be compatible with $.noConflict(), change the first line like this: jQuery(document).ready(function($){

Upvotes: 1

Related Questions