javascript - JqueryForm - check input field is at least 5 characters long - and also doesn't match certain words - Stack

admin管理员组

文章数量:1384482

I have a very simple form. Full Name/Email. What I want to do is check with jquery to make sure that they entered AT LEAST 5 characters in the name field. And if they did not, then I don't want the form to be submitted, instead I want to print some HTML below the form showing a warning/error message. How can I acplish this?

Also Can I add words manually to the script to make sure they were not entered in the name field? And if they were to make sure it prints errors again... For example, if they entered the word "bobby" or "stephanie" I don't want the form to be submitted if those EXACT words are entered. It is only like 5 or 6 words I want blocked, so I can enter them manually no problem in the script without bloating anything. Thank you so much in advance.

Here is my HTML

<div id="div1">
<label id="name-label" for="full_name">Name</label>
<input id="full_name" type="text" name="name" tabindex="1" autofocus="1">
</div>

<div id="div2">
<label id="email-label" for="email_address">Email</label>
<input id="email_address" type="email" tabindex="2" name="email">
</div>

And this is the added HTML I want printed if the jquery check is false

<div id="error">
<span class="error_message">Please enter your full name</span>
</div>

I have a very simple form. Full Name/Email. What I want to do is check with jquery to make sure that they entered AT LEAST 5 characters in the name field. And if they did not, then I don't want the form to be submitted, instead I want to print some HTML below the form showing a warning/error message. How can I acplish this?

Also Can I add words manually to the script to make sure they were not entered in the name field? And if they were to make sure it prints errors again... For example, if they entered the word "bobby" or "stephanie" I don't want the form to be submitted if those EXACT words are entered. It is only like 5 or 6 words I want blocked, so I can enter them manually no problem in the script without bloating anything. Thank you so much in advance.

Here is my HTML

<div id="div1">
<label id="name-label" for="full_name">Name</label>
<input id="full_name" type="text" name="name" tabindex="1" autofocus="1">
</div>

<div id="div2">
<label id="email-label" for="email_address">Email</label>
<input id="email_address" type="email" tabindex="2" name="email">
</div>

And this is the added HTML I want printed if the jquery check is false

<div id="error">
<span class="error_message">Please enter your full name</span>
</div>

• javascript
• jquery
• forms

Share Improve this question Follow edited May 2, 2014 at 23:33 randyttp asked May 2, 2014 at 23:25 randyttprandyttp 9822 silver badges99 bronze badges 3

• Have you even tried writing the validation yourself? Or are you asking for someone to do it for you... There are plenty of tutorials on how to use jQuery. Once you know how to use it, writing validation like you described is trivial. – Daniel Commented May 2, 2014 at 23:38
• Yeah I been looking through tutorials for over a day now. I can't figure it out and I need to get this project done ASAP. Maybe if someone can show me how its done then I can learn from that and better learn what to look for next time. – randyttp Commented May 2, 2014 at 23:41
• What can't you figure out? Post the code that you tried and what the problem is. – Daniel Commented May 2, 2014 at 23:45

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Let's assume your form has an id of myForm.

var words = ["bobby", "stephanie"];
jQuery('#myForm').on('submit', function(evt) {
    var form = $(this);

    var full_name = form.find('#full_name');
    var name_length = full_name.val().length;

    if( name_length < 5 ) {
        jQuery('#error').show();
        evt.preventDefault();
    }

    if( jQuery.inArray(full_name.val(), words) ) {
        evt.preventDefault();
    } 
});

Here is my answer: there are two if statements that we can construct:

1. Test if length of input exceeds 5 characters, and
2. Test if the input matches a list of banned words (stored in an array for convenience and verbosity)

It is a little plicated with the second conditional statement, since we want an exact match (therefore, using 'bobby' will raise a flag, but not 'bobby123'. This involves the use of word boundaries, \b.

You can view the code in action in this fiddle: http://jsfiddle/teddyrised/kmMcC/

$('form').submit(function(e) {
    var errorFlag = 0,
        bannedWords = [
            'bobby',
            'stephanie'
        ],
        bannedObj = new RegExp('\\b'+bannedWords.join('|')+'\\b', 'i');

    if($('#full_name').val().length <= 5) {
        errorFlag = 1;
    }

    if(bannedObj.test($('#full_name').val())) {
        errorFlag = 1;    
    }

    // Act on error flag, prevent form submission when one or more error flags are raised
    if(errorFlag) e.preventDefault();

});

Assuming you put this all in a form element, and add an input type='submit' element to it, I would suggest setting the form's onsubmit attribute to "return Validate();", and add the below validation function.

First you'll want to hide the message on ready using: $('error').hide();

function Validate(){
    var minLength = 5;
    var blockedNames = ["bobby","stephanie"];
    var fName = $('#full_name').val();
    if(fName.length < minLength){
        $('#error').show();
        $('#full_name').focus();
        return false;
    }
    for(var i = 0;i < blockedNames.length;i++){
        if(fName == blockedNames[i]){
            $('#error').show();
            $('#full_name').focus();
            return false;
        }
    }
    return true;
}

JSFIDDLE DEMO: http://jsfiddle/softvar/hv6yB/2/

UPDATE:

HTML

<form onsubmit="return check()">
<div id="div1">
    <label id="name-label" for="full_name">Name</label>
    <input id="full_name" type="text" name="name" tabindex="1" autofocus="1" />
</div>

<div id="div2">
    <label id="email-label" for="email_address">Email</label>
    <input id="email_address" type="email" tabindex="2" name="email" />
</div>
    <input type="submit" value="Submit"/>
</form>
<div id="error" >
<span class="error_message">Please enter your full name</span>
</div>

CSS

#error {
    color:red;
    display: none;
    border: 1px solid #D9534F;
    background: #FDF7F7;
    width: 80%;
    height: 25px;
    padding: 5px;
}

JS

function check() {
    var bannedWords = ['bobby','stephen'];
    var name= $('#full_name').val();
    if(name){
        if(name.length>5){
            for(var i=0;i<bannedWords.length;i++) {
                if(bannedWords[i] ==name){
                    $('#error').text('Its a banned word');
                    $('#error').css('display','inline-block');
                    return false;
                }
            }
                alert('form is going to be submitted');
                return true;
        }
        else{
            $('#error').text('Name is shorter');
            $('#error').css('display','inline-block');
            return false;
        }
    }
     $('#error').text('Name cant be blank');
     $('#error').css('display','inline-block');
    return false;
}

本文标签：