How do I not allow certain strings in a text field using jQuery

Question

I have a set of strings coming from database that are placed in a hidden div. e.g "CISCO", "XYZ", "VOLVO MACK". On form submission I want to validate the text field(code) shouldn't contain any of the codes above. These codes are dynamic so will change over time.

Something like this:

var ary = ["CISCO", "XYZ", "VOLVO MACK"];

$("#code_form").submit(function(){
  var code = $("#code").val();
  if(ary.contains?(code))
   return false;
  else
   return true;
});

Note that you need to (re) validate the input in your server-side code too, because the end user can bypass JS validation. — nnnnnn, Aug 04 '17 at 04:17
I'd flag as a duplicate but I already flagged as too broad. Possible duplicate of: [Javascript. Checking if string contains text from an array of substrings](https://stackoverflow.com/questions/5582574/javascript-checking-if-string-contains-text-from-an-array-of-substrings) — Clonkex, Aug 04 '17 at 04:21
Possible duplicate of [Javascript. Checking if string contains text from an array of substrings](https://stackoverflow.com/questions/5582574/javascript-checking-if-string-contains-text-from-an-array-of-substrings) — Jon P, Aug 04 '17 at 04:28

score 2 · Answer 1 · answered Aug 04 '17 at 05:42

This May Help You

var ary = ["CISCO", "XYZ", "VOLVO MACK"];
   
    $("#code_form").click(function(){
        var code = $("#code").val();
        var IsValue = ary.filter(function (key) {
        
            return key==code;
        });
        if (IsValue.length == 0) {
            //Text Don't Contain any Code of array
            $("p").text("Text Don't Contain any Code of array")
        }
        else {
            //Text Contain any of Code from array
            $("p").text("Text Contain any of Code from array")
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="code"/>
<input type="submit" id="code_form" />

<p></p>

ewwink · Answer 2 · 2017-08-04T04:02:49.383

0

check the input one by one or .serialize() your form and check if it containing words that you dont want and use .preventDefault() to cancel default action

$("#code_form").submit(function(e){
  var data = $(this).serialize();
  if(data.indexOf("XYZ") > -1){
    console.log(data);
    console.log("data containing XYZ, break");
    e.preventDefault();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form  id="code_form">
  <input type="text" value="XYZ" name="name">
  <input type="submit" value="submit">
</form>

edited Aug 04 '17 at 04:02

answered Aug 04 '17 at 04:01

ewwink

18,382
2
44
54

This isn't working for me, it just always says "data containing XYZ, break" no matter what I type – Clonkex Aug 04 '17 at 04:02
Is `-1` truthy in JS? – Clonkex Aug 04 '17 at 04:04
it just example, `.indexOf()` will return greater than `-1` if found string, for exact match use `$(your_element).val() == "XYZ"` – ewwink Aug 04 '17 at 04:08
Oh I know, but I'm wondering why you needed to specify the `> -1` because I thought anything <1 was falsy in JS. – Clonkex Aug 04 '17 at 04:09
@Clonkex >-1 means that search string found in the input-box string – Alive to die - Anant Aug 04 '17 at 04:11
I just thought _"wait, what? -1 is truthy in JS?"_. I previously believed anything <1 was falsy in JS, but since _ewwink_ had to add `> -1` to make the expression work correctly, that means it was succeeding when the result from the `indexOf` returned `-1`, which means that `-1` must be truthy. It just threw me a bit, is all; I've been working on the principle of anything <1 being falsy. Must be just lucky that it hasn't broken any of my code so far. – Clonkex Aug 04 '17 at 04:15
indexOf not return `true` or `false` but integer or index position so we need to compare with integer too to get `true` or `false` – ewwink Aug 04 '17 at 04:18

score 0 · Answer 3 · answered Aug 04 '17 at 04:05

From what I understand in your question, you have a string (let's call this string s) that you want not to match another set of string, which I assume are contained in an array of string (let's call this array array).

In this case, it's simple, you just loop through each string inside of array and check if the element matches the string s. For example:

let codematch = false;
for (let i = 0; i < array.length; i++) {
    if (s.indexOf(array[i]) != -1) {
        codematch = true; break;
    }
}
if (codematch) {
    // do something in case of error
} else {
    // do something in case of success
}

Now, I don't know how these codes are given, but what you can do is to place them in an array and do the above. And no, you don't need jQuery to perform this check, but I have to say, your question needs clarification.

score 0 · Answer 4 · answered Aug 04 '17 at 04:07

Try this:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){

  var words = ["CISCO", "XYZ", "VOLVO MACK"];

  $('#example').keyup(function(){
 var s = $(this).val();
 if (words.indexOf(s) > -1)
 alert("Not allowed");
  });
  
});
</script>
</head>
<body>
  <input type="text" id="example"/>
</body>
</html>

How do I not allow certain strings in a text field using jQuery

4 Answers4