-1

Im looking to display a notice if a user types a specific combination of numbers into a text field without them having to submit the form.

Ex: If user types 1234 or 7890 into Field #ExampleField1, the page will display the div #ExampleDiv1

I've found tons of form validation examples that happen on submit but not live.

John Moore
  • 31
  • 7

3 Answers3

3

Updated to answer question in comment

Something like this might get you started.

Realtime:

arr = ['4486','4716','5568'];
$('input').keyup(function(){
  var tmp = this.value;
  var fnd = false;
  for (i=0; i<arr.length; i++){
      if ( this.value.indexOf(arr[i])>-1 ) fnd = true;
  }
  if (fnd){
    $('#msg').addClass('wow').slideDown('slow');
  }else{
    $('#msg').removeClass('wow').slideUp('slow');
  }
});
.wow{background:yellow;color:brown;}
#msg{margin-top:10px;display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Watching for 4486, 4716, 5568:<br>
<input id="ExampleField1" type="text" />
<div id="msg">It's one of <em>THEM</em></div>

Or upon leaving field

$('input').blur(function(){
  if (this.value.indexOf('1234') > -1) $(this).addClass('wow');
  else $(this).removeClass('wow');
});
.wow{background:yellow;color:brown;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Watching for 1234: <input id="ExampleField1" type="text" />

Or upon form submit:

$('form').submit(function(){
  if ( $('#ExampleField1').val().indexOf('1234') > -1) $('#ExampleField1').addClass('wow');
  else $('#ExampleField1').removeClass('wow');
});
.wow{background:yellow;color:brown;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Watching for 1234: <input id="ExampleField1" type="text" />
cssyphus
  • 37,875
  • 18
  • 96
  • 111
  • This is working great but how do I properly modify it to watch for multiple sets of numbers instead of just 1234? – John Moore Jun 27 '16 at 20:52
  • Are you looking for specific numerical sequences, or ANY numerical string? – cssyphus Jun 27 '16 at 20:55
  • Im looking to detect 3 different sets of numbers 4486, 4716, 5568. This is for a credit card form. Im looking to show a message if they enter any of these three. – John Moore Jun 27 '16 at 21:05
  • Hey @JohnMoore, I have modified my answer above to look for a few different sequences using a regular expression. Check it out. – idream1nC0de Jun 27 '16 at 21:23
  • @JohnMoore I updated my answer to demonstrate how to do that using an array. ***The first example*** shows the change. – cssyphus Jun 27 '16 at 21:35
  • @JacobHeater This is working perfect now. One more question, how might I use the same code to remove the message if the field is empty? Just in case someone clears it and uses a new number. – John Moore Jul 01 '16 at 17:41
  • This is working perfect now. One more question, how might I use the same code to remove the message if the field is empty? Just in case someone clears it and uses a new number. @gibberish – John Moore Jul 01 '16 at 17:49
  • @JohnMoore *Jacob is marked best answer here so I'll let him answer your questions* – cssyphus Jul 01 '16 at 21:30
2

This shows you how to show/hide an element based on text input.
I used regular expressions for efficiency and clarity. I also tested my regular expressions here.

//Shorthand for $(document).ready();
$(function() {
  //The numbers to search for in the string.
  var numRegEx = /(4486|4716|5568)/;
  var msg = $('#msg');
  //Hide the message on load.
  msg.hide();
  var txt = $('#txt');
  //Wire up the keyup event listener
  txt.keyup(function(){
    var val = $(this).val();
    /*****
    Using regular expressions is the most efficient way to do this.
    You can check for additional numbers above by modifying 
    the regular expression.
    ******/
    if (numRegEx.test(val)) {
      msg.show();
      //You can use other jQuery methods to show/hide the message.
      /*
      msg.slideDown();
      msg.fadeIn();
      */
    } else {
      msg.hide();
      /*
      msg.slideUp();
      msg.fadeOut();
      */
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="txt">Try entering text that contains 4486 OR 4716 OR 5568</label>
<br/>
<input type="text" id="txt" placeholder="Enter text here..." />
<div id="msg">
  <b>Hello, world!</b>
</div>
idream1nC0de
  • 1,171
  • 5
  • 13
  • If the answer suffices, would you kindly consider marking it as the answer? – idream1nC0de Jun 27 '16 at 21:24
  • 1
    One problem Ive noticed, is that if they keep typing their full credit card number the message will go away: https://jsfiddle.net/bL35bL2y/3/ It stayed there until I got to the last digit. it may have been a fluke, seems to be working after I refreshed a few times. – John Moore Jun 27 '16 at 21:27
  • @JohnMoore, I removed the global flag on the regular expression and it works as expected. – idream1nC0de Jun 27 '16 at 21:32
  • Hey @JohnMoore, I saw your comment below. I tested this code, and when you `empty` out the text box, it `hides` the message. Please run the snippet above and enter some text. Then `clear` out the text box, and you will see the message is `hidden`. Let me know if this is not working. – idream1nC0de Jul 02 '16 at 12:53
  • Hey, it worked. I was just curious how to do it with the other guys code. Next Im going to try making this code watch multiple fields at once instead of only #txt. I will try it and see if I can figure that out. @JacobHeater – John Moore Jul 05 '16 at 15:35
  • @JohnMoore Your best bet is to go with CSS classes. – idream1nC0de Jul 05 '16 at 21:47
0
<form>
    <input class="target" type="text" value="Field 1">
</form>
<button id="other">
    Trigger the handler
</button>


$( ".target" ).change(function() {
    alert( "Handler for .change() called." );
});
$( "#other" ).click(function() {
    $( ".target" ).change();
});

look here: https://jsfiddle.net/ztvnwthk/
and here: https://api.jquery.com/change/

idream1nC0de
  • 1,171
  • 5
  • 13
S.P.
  • 45
  • 2
  • 7