Jquery input form default value validation

Question

I have a small submit form on the sidebar of http://wines.effectwave.com/ I am trying to validate it with Jquery. I want to check if someone submits the form with the default values (eg. 'Full Name') then it should raise an error. So far I have validated it against empty values and minimum characters. But how do I check this condition of default values? Here is my Jquery code so far:

// JavaScript Document

$().ready(function() {

    // validate signup form on keyup and submit
    $("#regform").validate({
        rules: {

            fname: {
                required: true,
                minlength: 3
            },

            phone: {
                required: true,
                minlength: 8
            },

            comments: {
                required: true,
                minlength: 5
            },
            email: {
                required: true,
                email: true
            },
        },

        messages: {

            fname: {
                required: "Please enter your full name",
                minlength: "Your full name must consist of at least 3 characters"
            },

            phone: {
                required: "Please enter your phone number",
                minlength: "Your phone number must consist of at least 8 characters"
            },

            comments: {
                required: "Please provide some comments",
                minlength: "Your comments must be at least 5 characters long"
            },
            email: "Please enter a valid email address",
        }
    });

});

As far as I know, `validate` is not a jquery function. So you are probably using a plugin. Which one? — Yann Sagon, Feb 13 '14 at 10:12
He's obviously using jquery-validate: http://jqueryvalidation.org/ — Barmar, Feb 13 '14 at 10:19

Kontiomaa · Answer 1 · 2014-02-13T13:51:24.197

1

Could you consider using placeholder instead of value in HTML?

turn this:

<input type="text" name="fname" id="fname" value="Full Name"...

into:

<input type="text" name="fname" id="fname" placeholder="Full Name"...

It looks the same but the actual "value" is empty so you should be able to check if they are filled at all.

More info on placeholder at http://www.w3schools.com/tags/att_input_placeholder.asp

edited Feb 13 '14 at 13:51

answered Feb 13 '14 at 10:40

Kontiomaa

13
5

score 0 · Answer 2 · answered Feb 13 '14 at 10:20

You have to create custom validation method and add it to jQuery Validator.

$(document).ready(function () {
//add your custom method to validator
    $.validator.addMethod("DefaultCheck", function (value, element) {
        return value == "FullName" || "SomeOtherDefaultvalue"; // Default values to check against
    }, 'Please add a valid fullname');  //Validation Message

    $("#regform").validate({
        rules: {

            fname: {
                required: true,
                minlength: 3,
                DefaultCheck: true   // your custom method
            }
        }
    });

});

lauksas · Answer 3 · 2014-02-13T15:52:34.567

-1

You can use not equal. The J query docs are not clear about this...

 jQuery.validator.addMethod("notEqual", function(value, element, param) {
 return this.optional(element) || value != $(param).val();
}, "The value can not be: " + value);
    $("#regform").validate({
            rules: {

                fname: {
                    required: true,
                    minlength: 3, 
                    notEqual:'Full Name'
                },

                phone: {
                    required: true,
                    minlength: 8
                },

                comments: {
                    required: true,
                    minlength: 5
                },
                email: {
                    required: true,
                    email: true
                },
            }

edited Feb 13 '14 at 15:52

answered Feb 13 '14 at 10:23

lauksas

533
7
14

I didn't knew about `notEqual`, Do you have any documentation link ? – Rajesh Dhiman Feb 13 '14 at 10:45
I don't sorry, like I said in the post, J query documentation is poor in this part. If the answer worked, please, up vote it :-) – lauksas Feb 13 '14 at 11:08
**There's nothing wrong with the docs, because there is no such thing as `notEqual`** in [jQuery](https://api.jquery.com) or the [jQuery Validate plugin](http://jqueryvalidation.org). This answer is pure fantasy and should be deleted. – Sparky Feb 13 '14 at 15:47
no there isn't, but you can implement it. And the documentation does not show that easily. Something got Wrong with my code on the android app, I'll edit the answer. – lauksas Feb 13 '14 at 15:50
Since my last comment, you've edited your answer to create an arbitrary `notEqual` rule with the plugin's `.addMethod()` method. Based on the disconnected text of your answer and your last comment, I don't think you even realize what you're doing. In other words, the `notEqual` rule is not documented at jQuery or jQuery Validate because it doesn't exist until you create it. – Sparky Feb 14 '14 at 02:43
What I said is not well documented is that you can create custom validation methods. Anyways, sorry about the confusion. – lauksas Feb 14 '14 at 09:46

Jquery input form default value validation

3 Answers3