How to validate a form's input value

Question

I am trying to validate a form's input value after clicking a button using jQuery and javascript.

Right now, if I put in a value for the input and click submit the input field and button just disappears. Any idea what I have wrong here?

The HTML file...

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link/>
        <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
            <form>
                <input type="text" id='input_1'>
                <input type="submit" value="Send" id="send">
            </form>   
    </body>
</html>

The script file...

$(document).ready(function() {
    $('.send').click(function() {
        validateInput(document.getElementById('#input_1'));
        function validateInput(inputValue){
             if (inputValue === 3) {
             alert("Element cannot be equal to 3");
             }
        }
    });
});

Best jQuery Form Plugin. Easily validate anything useing "beforeSubmit" option — SpYk3HH
– SpYk3HH, Commented May 6, 2013 at 15:10
click(function(event) { event.preventDefault(); will stop executing form submit — Eraden
– Eraden, Commented May 6, 2013 at 15:10
Additional do not use click(). Please use on('click',... — Eraden
– Eraden, Commented May 6, 2013 at 15:11
First is you do not prevent it will send request, second is more semantic. — Eraden
– Eraden, Commented May 6, 2013 at 15:14
You are right, but most programmers I know and discuss this problem prefer on. Only because this is more readable than $('button').click for example. — Eraden
– Eraden, Commented May 6, 2013 at 15:20

웃웃웃웃웃 · Accepted Answer · 2013-05-06 15:20:29Z

1

$(document).ready(function() {
    $('#send').live('click',function() { //Because send is the id of your button
        if(validateInput(document.getElementById('#input_1'))){
            alert("Element cannot be equal to 3");
            return false;
         }
         else{
             //Do something else
         }
        function validateInput(inputValue){
             if (inputValue == 3) {
             return false;//Will prevent further actions
             }
        }
    });
});

edited May 6, 2013 at 15:20

answered May 6, 2013 at 15:10

웃웃웃웃웃

12k15 gold badges63 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Stephen Hammett Over a year ago

I see I was using . instead of # for the send button. I also included the 'return false;//Will prevent further actions' as you recommended. The input and button are still disappearing after hitting send. Any additional thoughts?

cortex Over a year ago

Use .on() or .delegate() instead of .live(). Live is deprecated!

Karl-André Gagnon Over a year ago

The return false must be inside the click function, not validateInput().

Karl-André Gagnon Over a year ago

Or call validateInput like that : return validateInput(arg) and keep your return false in the function.

Stephen Hammett Over a year ago

This prevented the input and button from disappearing but if I enter 3 the alert isn't executing.

Richard Tonata · Accepted Answer · 2013-05-06 15:20:25Z

0

this $('.send').click(function() { should be $("#send").click(function() {. Notice the Hash symbol and not the dot (.), dot is used if the selector is a class whereas the # is used if the selector is an ID.

2.You should move the validation function outside the $(document).ready(function().. Hope that helps

answered May 6, 2013 at 15:20

Richard Tonata

3631 gold badge6 silver badges14 bronze badges

Comments

Stephen Hammett · Accepted Answer · 2013-05-06 19:25:54Z

Thank you all for your responses. Unfortunately, I wasn't able to get it to work using your recommendations. I decided to use jQuery to get the element and appended a message to a div instead of using alert. This was a different approach but ended up working.

HTML...

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link/>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
            <form>
                <input type="text" name="input"/>

            </form>
            <button id="send">Send</button>
            <div class="error">
            </div>
    </body>
</html>

SCRIPT...

$(document).ready(function() {
    $('#send').click(function(){ 
    var toValidate = $('input[name=input]').val();
    if (toValidate == 3) {
    jQuery('.message').html('');
        $('.error').append('<div class="message">' + toValidate + " is    invalid" + '</div>');
    }
    else {
        jQuery('.message').html('');
        $('.error').append('<div class="message">' + toValidate + " is valid" + '</div>');
         }

    });
});

Collectives™ on Stack Overflow

How to validate a form's input value

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related