-1

I am working on validation rules and I would like to use pure javascript. I would also like to use JQuery validator. So here is my problem. I am typing different fields of a form and I would like to detect the invalidation at the moment the client is typing (dynamically). I found a solution but that's not the required result. So I would not want to use the alert function. Here is my code :

   $('#name').keyup(function(key)
   {
    if (this.value.length >= 2 || this.value == '')
     {
        alert('my message'); // This works but it not what I want to do.
        // I want to have a message after my field with the error message.

        $('#name').after('<span class="error"> my message</span>');
        //This is what I try also but it repeat the message many times.

        document.getElementById("name").innerHTML = "my message";    
        // I tried this but I didn't see anything in my browser.         
   }
});

So what I want to do of example in this function is to print a message telling me the field is empty and disappear once it's not. Any Suggestions?

Naeem Ul Wahhab
  • 2,465
  • 4
  • 32
  • 59
bsm
  • 81
  • 2
  • 9

3 Answers3

1

Here is a fully working example:

https://jsfiddle.net/hruby718/1/

you need a 

$(document).ready(function() {

around

$(document).ready(function() {
    $('#name').keyup(function(key){
        if (this.value.length >= 2 || this.value == ''){
            alert('my message'); // This works but it not what I want to do.
            // I want to have a message after my field with the error message.

            $('#name').after('<span class="error"> my message</span>');
            //This is what I try also but it repeat the message many times.

            document.getElementById("name").innerHTML = "my message";    
            // I tried this but I didn't see anything in my browser.         
       }
    });
});

and yes like Ivan Sivak mentioned 

$('#name').keyup(function(key){

is not pure JS

why can't you use jQuery

Felix
  • 5,452
  • 12
  • 68
  • 163
  • I could not use it because they impose it to me. I tried what you have proposed but it does not work. – bsm Aug 10 '17 at 09:12
  • check out the jsfiddle I posted above there it works. Can you check out the browser console are there errors? – Felix Aug 10 '17 at 09:13
  • Have you imported jQuery? – Felix Aug 10 '17 at 09:16
  • it was done in order to use **Bootstrap**. I tried jsFiddle code but it doesn't work, but I do not know what the code there should do. – bsm Aug 10 '17 at 09:19
  • sorry again ... to much browsers open ;) https://jsfiddle.net/hruby718/1/ – Felix Aug 10 '17 at 09:28
  • it's the same result I got, I would not like to use alert. Furthermore, there is a problem related to repetitive errors. – bsm Aug 10 '17 at 09:39
  • remove then remove the alert? ... what do you want instead of alert? ... next of the input is the text also printed? ... – Felix Aug 10 '17 at 09:42
  • That's the same result @Felix I got the text printed a lot of times – bsm Aug 10 '17 at 09:46
  • can you better explain what you want? and whats the different to the one in the jsfiddle? – Felix Aug 10 '17 at 09:52
  • what I want is to detect dynamically errors while tying a form (differents fields of the form), and then if their is an error a red message is written telling what is the error, and when the error does not exist , it tells nothing. – bsm Aug 10 '17 at 11:18
  • what kind of error? ... the writing text next to the input is working. Now you have to implement the validations and just a css class for the message to change the color. but the validations are a different question. so please open a new one! It would be kind to vote up my answer because its a solution for you main problem – Felix Aug 10 '17 at 11:22
  • Sorry @Felix but your answer is not correct, you take the same code and add $(document).ready. It gives the same result. The answer is given by Jason. – bsm Aug 10 '17 at 11:26
  • ... its a fix for your code problem not displaing the message ... but okay – Felix Aug 10 '17 at 11:27
1

Since you said you want pure Javascript, you could try this one :

<html>
    <body onload=myFunction2()>
        <input type="text" id="myinput" onkeyup="myFunction()" /> 
        <span id="myspan" style="color:red;" ></span>

        <script>

            var myspan = document.getElementById("myspan");


            function myFunction(){

                var l = document.getElementById('myinput').value;
                if (l.trim().length >= 2 || l.trim() == '')
                    {
                        myspan.innerHTML = "My error message";
                    }
                else{
                    myspan.innerHTML = '';
                }
            }

            function myFunction2(){

                var l = document.getElementById('myinput').value;
                if(l.trim() == ''){
                    myspan.innerHTML = "Do not let this field empty.";
                }

            }
            </script>
    </body>
</html>
Jason Krs
  • 704
  • 2
  • 9
  • 30
  • yes this one looks good as well, but he needs jquery for bootstrap ... so he has already the import ... so I don't understand why not to use jquery – Felix Aug 10 '17 at 09:23
  • Thanks but the message error does not dissapear if my length is equal to 1 for example. – bsm Aug 10 '17 at 09:24
  • @ysd Try the new code...Notice I have changed the position of `var myspan` in the script – Jason Krs Aug 10 '17 at 09:27
  • @Felix I read somewhere here that it was imposed to him... That may be why – Jason Krs Aug 10 '17 at 09:27
  • @ysd Read the code I just posted. At first, the error message is absent. I said in the script to clear the span before starting. Whenever the condition `l.length >= 2 || l == ''` is respected, you will have the error message printed. So the first time you press a key in the input field, the script will start doing its job constently – Jason Krs Aug 10 '17 at 09:33
  • @Jason Thank you, but I would like to get the error at the begining, another question how you could color the error (red). – bsm Aug 10 '17 at 09:37
  • @ysd At the beginning of what ? You mean above the input field? – Jason Krs Aug 10 '17 at 09:47
  • @Jason for the color it's done. I would like at the begining when my field is empty to got a message telling me your field is empty (the first time) – bsm Aug 10 '17 at 09:49
  • @ysd Try this code. I made some adjustments with `trim()` – Jason Krs Aug 10 '17 at 09:58
  • Thanks a lot @Jason , do you know by chance how to change the color of the box? – bsm Aug 10 '17 at 11:15
  • @ysd Yes I do. Butin your OP you've asked a question a specific problem. I provided an answer for that. You need to do some research for your other problems. Look here at stackoverflow I'm sure you'll find something or just google. If you find no answer, ask another question. You should say thanks by accepting the answer or at least casting a vote up on it. Now check this [stackoverflow answer](https://stackoverflow.com/a/5617741/6266949) to change the background color of your input text. – Jason Krs Aug 10 '17 at 12:13
  • @ysd Okay. Glad I could help you. – Jason Krs Aug 10 '17 at 13:47
-1
    $(document).ready(function(){
        $('#name').keyup(function(){
            //i use jquery get input's value 
            if($('#name').val().length >=2 || $('#name').val() == ''){
                //alert('message');
                console.log('function go into');
                $('#name').after('<span class="error"> my message </span>');
                //document.getElementById('name').innerHTML = 'my message';
                //change input's value ,should use val() or value;
                //$('#name').val('myMessage');
                document.getElementById('name').value = 'my message';
            }
        })
    })
dengzhidong
  • 1
  • 1
  • You should provide a real answer, not just plain code. What have you done to solve the issue? Why? – hering Aug 10 '17 at 09:47