Javascript Prompt() Input validation

Question

I'm struggling with the HTML code to validate the input of a Javascript prompt() in an external js file. I understand calling the Javascript function to validate and I know how to write the function, but how do you "listen" for the prompt and subsequent input in HTML?

Does the prompt have to be done in the HTML doc as a form?

Are you talking about the window.prompt function? developer.mozilla.org/en-US/docs/Web/API/window.prompt. If yes, there is no way to validate the input while typing. You can only validate the value after the user submits the value. — Felix Kling
– Felix Kling, Commented Jun 20, 2013 at 16:14
you don't listen for it, prompt() is sync, returning its result to whomever called it immediately upon closing the dialog. — dandavis
– dandavis, Commented Jun 20, 2013 at 16:15
Must you use prompt()? The same code that displays the prompt command can display a jQueryUI dialog() box and then validate the input in the close: routine of the dialog. It really is simpler than it sounds -- Try this jsFiddle. If you agree, then I'll post a standalone answer (you can figure it out, but it helps to see the <head> and sections that jsFiddle hides. — cssyphus
– cssyphus, Commented Jun 20, 2013 at 16:26

Quentin · Accepted Answer · 2013-06-20 16:15:25Z

5

prompt is blocking. Whatever is entered into it is returned only after the OK button has been clicked (or enter has been pressed).

var foo = prompt('bar', 'baz');
if (some_condition(foo)) {
    // do something
} else {
    // do something else
    // (which might be to recursively call the function this code
    //  is inside until an acceptable result is received)
}

answered Jun 20, 2013 at 16:15

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

5 Comments

imulsion Over a year ago

missing a bracket on line 2 :)

dandavis Over a year ago

missing closing paren on line 1

imulsion Over a year ago

@dandavis uh...no he isn't

dandavis Over a year ago

not anymore, it was edited. looks like a rush to be the first led to a few missing keystrokes, it happens.

Quentin Over a year ago

There was never an error on line one. There was a typo on line two, thanks to @imulsion for pointing that out.

cssyphus · Accepted Answer · 2013-06-20 16:39:35Z

Sorry, I can't wait around... Here is the code that I mentioned in my comment above. jsFiddle live example here.

This is a fully working, stand-alone example. Just copy/paste into a file and run.

Note that you must reference / load the jQuery and jQueryUI libraries before the code itself (done here in the tags).

Honestly, prompt() is a bad idea for websites these days. Perhaps this is more like what you want to do. Validation (of what the user typed) is done in the close section of the dialog.

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

        <script type="text/javascript">
            $(document).ready(function() {

                $('#mybutt').click(function() {
                    $('#msg').dialog({
                        autoOpen:true,
                        modal:true,
                        title: 'This is a question:',
                        buttons: {
                            Go: function() {
                                $(this).dialog('close');
                            }
                        },
                        close: function() {
                            var s = $('#sumpin').val();
                            if (s.length<15)
                                alert('Please type more than 15 characters');
                            else
                                alert('You typed: ' + s);
                        }
                    });
                });

            }); //END $(document).ready()

        </script>
    </head>
<body>

    <div id="msg" style="display:none">
        Type something here:<br />
        <input id="sumpin" type="text">
    </div>
    <br />
    <input type="button" id="mybutt" value="Click Me">

</body>
</html>

scarecrow · Accepted Answer · 2013-06-20 16:18:56Z

0

a prompt returns the value that you entered in the dialog window. use the returned value for whatever you want to do. like this:

var answer = prompt("<something>");
//stuff with answer

fiddle

answered Jun 20, 2013 at 16:18

scarecrow

6,8845 gold badges22 silver badges39 bronze badges

Collectives™ on Stack Overflow

Javascript Prompt() Input validation

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

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

Linked

Related