validating a textbox through JavaScript

Question

I want to validate the textbox in such a way that if it is null or contains Characters then php will not be called on clicking the SUBMIT button .Waiting for the helpful answers... here is my code :

<html>
    <head>
    <script>

        function myfunction(val)
        {
                var x=document.getElementById('ops');
                var y=document.getElementById('text');
                var z=document.getElementById('lb');
                //if(val='pepsi')
                {   
                    z.style.display = "block";
                    y.style.display = "Inline";
                }
    }
    function myfun2()
                {
                var c=document.getElementById("lb1");
                var b=document.getElementById("btn1");
                b.style.display="block";
                c.style.display="block"
                }
        </script>


    </head>
    <body>
    <form name='mform' >
    <select id="ops" onChange="myfunction(this.value);">
    <option>PIck item </option>
    <option value="pepsi">pepsi</option>
    <option value="coke">coke</option>
    <option value="fanta">Fanta</option>
    </select><br><br>
    <label id="lb" style="display:none" >Qty</label>
    <input type="text" name='qtytext' id="text" style="display:none" onFocus="myfun2()"/ >

    <label id="lb1" style="display:none" >.....Before proceeding, Make sure that form is properly filled.....</label>
    <input type="submit" name'btn' id='btn1' value="Submit" style='display:none' /> <br>

    </form>
    </body>
    </html>

on the input tag it's enough that you put `required` for example: `` — Saar, Sep 23 '15 at 19:55
possible duplicate? This question goes into javasript validation http://stackoverflow.com/questions/18082/validate-decimal-numbers-in-javascript-isnumeric — Mousey, Sep 23 '15 at 20:53

Adam Buchanan Smith · Answer 1 · 2015-09-23T20:05:32.443

Like this? https://jsfiddle.net/DIRTY_SMITH/rmgo51dd/1/

For the number validation part, I just made it impossible to type anything but a number in the text field.

javascript

 function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
    }
    function validate(){
    var text1 = document.getElementById('text').value;

    if (text1.length > 0){
        alert("working");
        return true;
    }

    alert("please enter something");
    return false;
    }
           function myfunction(val)
        {
                var x=document.getElementById('ops');
                var y=document.getElementById('text');
                var z=document.getElementById('lb');
                //if(val='pepsi')
                {   
                    z.style.display = "block";
                    y.style.display = "Inline";
                }
                }
                function myfun2()
                {
                var c=document.getElementById("lb1");
                var b=document.getElementById("btn1");
                b.style.display="block";
                c.style.display="block"
                }

HTML

<input type="text" name='qtytext' id="text" style="display:none" onFocus="myfun2()"/ >

<label id="lb1" style="display:none" >.....Before proceeding, Make sure that form is properly filled.....</label>
<input type="submit" onClick="return validate()" name='btn' id='btn1' value="Submit" style='display:none' /> <br>

@WaqasAhmed umm, thats all you can input is integers? did you try to insert something else? — Adam Buchanan Smith, Sep 23 '15 at 20:11

reddiky · Answer 2 · 2015-09-23T20:58:21.197

0

Using a null check and simple regex along with a form validation you can do this pretty quickly.

<script>  
function validator()
{
  var x = document.forms["mform"]["qtytext"].value;
  if (x == null || x == "") {
      alert("Please enter a valid number");
      return false;
  }
  var n = x.search(/\D/);
  if (n >= 0){
      alert("Please enter a valid number");
      return false;
  }
}                            
</script>

<form name='mform' onsubmit="return validator()">....</form>

http://embed.plnkr.co/oDVTxywRRAvHDjpUkxWL/preview

edited Sep 23 '15 at 20:58

answered Sep 23 '15 at 20:23

reddiky

172
2
11

can you add explanation and enough to make the answer usable even if the link breaks later? ty – Mousey Sep 23 '15 at 20:50

score -1 · Accepted Answer · answered Sep 23 '15 at 20:11

-1

To validate a form to prevent submit (Sending information to PHP in your case) need to have a JavaScript callback on the form onsubmit event. For example HTML:

<form name="myform" onsubmit="checkDirty();">

    <!-- Your form elements -->

   <button type="submit">Submit Form</button>
</form>

and in your JavaScript

function checkDirty(){
     //check your validation
     if(/* some condition */){
         return true; // submit the form
     }
     return false; // prevent submitting the form
}

It should be this way if you are using pure JavaScript, but I would suggest if you could use jQuery the solutions will be easy as there are many validation scripts are available, you can use one of these jQueryvalidation jQuery Validation Engine jQueryFormValidate

All the best!

answered Sep 23 '15 at 20:11

Ashok Vishwakarma

669
7
20

1

someone is marking it as ''not useful "..same happend with my question – Waqas Ahmed Sep 23 '15 at 20:23
are you find it useful? – Ashok Vishwakarma Sep 23 '15 at 20:24
if I use Action atribute in form and call my PHP Is it possible?? – Waqas Ahmed Sep 23 '15 at 20:29
Until your callback `checkDirty()` will not return true, it will not go anywhere. `action` attribute is used to specify the URL form needs to be POST/GET where `method="POST"` or `method="GET"` with specify the HTTP method of the form. – Ashok Vishwakarma Sep 23 '15 at 20:35
it means that onSubmit must be true in order to proceed towards PHP via ACTION ?? isn't it?? – Waqas Ahmed Sep 23 '15 at 20:37
yes!! you just got it mate, now you can up-vote all my comments and ans please :) :P – Ashok Vishwakarma Sep 23 '15 at 20:41
@AshokVishwakarma you may have been downvoted because your code didn't include the number validation, you can edit your answer to improve though. Not everyone who downvotes leaves feedback, so I can only guess. – Mousey Sep 23 '15 at 20:52
@Mousey Literally?? before getting into number validation, I thought to make him understand how the HTML `form` and `submit` handler even work, is it bad to educate someone for what they doing wrong? – Ashok Vishwakarma Sep 23 '15 at 20:55
@AshokVishwakarma it's not a complete answer to the original question, that's all I could see might cause a downvote. – Mousey Sep 23 '15 at 20:59
@Mousey yes certainly its not, I agreed. Thanks! I'll take care in future. – Ashok Vishwakarma Sep 23 '15 at 21:00
1

I wish i could vote but my score is less than 15 as m new to stackoverflow – Waqas Ahmed Sep 23 '15 at 21:05
@WaqasAhmed I was kidding BTW :) :P – Ashok Vishwakarma Sep 23 '15 at 21:06
@WaqasAhmed you asked the question so you can tick the Tick box left of it to mark it as an accepted answer, gives reputation of 15 to the poster (upvotes do 10 points). – Mousey Sep 23 '15 at 21:07
@AshokVishwakarma downvotes seem quite common, somewhere in the help part is something about How to Write a Good Answer. SO is very busy so both downvotes and upvotes can happen quickly – Mousey Sep 23 '15 at 21:09

validating a textbox through JavaScript

3 Answers3