CODEWITHSUNDEEP
jquery
user747291
user747291

Reputation: 821

jquery validating text entered with comma

I have the below to check if the text entered has a comma. 

$("#keywords").change(function() {
    if (this.value.indexOf(",") == -1) {
        alert('Please separate multiple keywords with a comma.');
    }
});

I basically want a way to tell the user if he is entering more than one word without a comma, he needs to separate it with a comma. The above change event seems to trigger everytime. I am sure there is a better event to do this. Can any one please suggest. thanks

Upvotes: 3

Views: 2854

Answers (4)

Alex
Alex

Reputation: 21766

You could just validate the input when the user submits the data:

$('#warningMessage').hide()
$('#submit').click(function(e) {
  var isValid = true;
  $('#value').each(function() {
    if (($.trim($(this).val()).indexOf(",") == -1)) {
      //alert('Please separate multiple keywords with a comma.');
      $('#warningMessage').show();
    } else {
      $('#warningMessage').hide()
    }
  });
  if (isValid == false) e.preventDefault();

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="label">Value</div>
<input type="text" id="value" name="value" />
<br />
<div style="margin-left:140px;">
  <input type="submit" name="submit" value="Submit" id="submit" />
</div>
<div style="color:orange;" id="warningMessage"><b>Please separate multiple keywords with a comma</b>
</div>

Upvotes: 1

Tushar
Tushar

Reputation: 87203

Check if user has entered more than one word i.e. if the value contains space, then show the message.

if(this.value.indexOf(" ") > -1) {

I'd recommend you to use pattern on the input as follow.

[a-zA-Z]+(,\s*[a-zA-Z]+)*

Regex online Demo and Explanation

  1. [a-zA-Z]+: Allow one or more alphabets, both lowerCase and upperCase
  2. (,\s*[a-zA-Z]+)*: Allow zero or more of the string that starts with comma separated by optional space and then one or more alphabets.

span {
  display: none;
  color: red;
}
input:invalid {
  border: solid 1px red;
}
input:invalid ~ span {
  display: block;
}
<input id="keywords" pattern="[a-zA-Z]+(,\s*[a-zA-Z]+)*" /><span>Keywords should be separated by comma</span>

Upvotes: 4

Shashank Agrawal
Shashank Agrawal

Reputation: 25797

If you are using the jQuery validator then you can register a custom validator:

jQuery.validator.addMethod("checkComma", function(value, element) {
        var words = value.split(" ").length;
        var commas = value.split(",").length;
        // For n number of comma, there must be n + 1 spaces i.e. words
        return words === (commas + 1)
    },
    "Please separate multiple keywords with a comma."
);

Now, in your input field, add this validator:

<input type="text" name="myname" check-comma="" />

Or you can use the same logic as you are using:

$("#keywords").change(function() {
    var words = value.split(" ").length;
    var commas = value.split(",").length;
    // For n number of comma, there must be n + 1 spaces i.e. words
    if (words != (commas + 1)) {
        alert('Please separate multiple keywords with a comma.');
    }
});

Upvotes: 0

Sephirus
Sephirus

Reputation: 16

Event as onchange is ok to do this. The other thing is what if user writes only one keyword - should it alert him then?

Add check for spaces - if there aren't any dont show message (one keyword).

Upvotes: 0

Related Questions