New course! Every coder should learn Generative AI!
Try a free lesson0
Validating prompt boxes in such a way that the required field must contain valid characters before submitting. Getting it wrong!
<html> <body> <input type="button" id="btn" value="Click Me" onclick="btn1()"> <script> function btn1(x, y){ var d = /^[A-Za-z]+$/; var e = /^[0-9]+$/; var x = prompt("Enter name"); var y = prompt("Enter Number"); if(x.match(d)){ prompt(y); }else{ alert("Name must contain only alphabets"); btn1(x); } if(y.match(e)){ alert("Data Submitted"); } else{ alert("Enter Numbers Only"); btn1(y); alert("Data Have been added"); } } </script> </body> </html>
14 Answers
+ 6
My first suggestion would be to use a loop instead of recursively invoking the function on getting invalid input. If you use <input> element you can set the "pattern" attribute to use the regexp as validation rule.
Reference:
https://www.w3schools.com/tags/att_input_pattern.asp
Here's your function modified to using a loop:
function btn1() {
var d = /^[A-Za-z]+$/;
var e = /^[0-9]+$/;
var x;
while (true) {
x = prompt("Enter name");
if(!x.match(d)) {
alert("Name must contain only alphabets");
continue;
}
break;
}
var y;
while (true) {
y = prompt("Enter a number");
if(!y.match(e)) {
alert("Enter numbers only");
continue;
}
break;
}
alert("x: " + x + "\ny: " + y + "\nData Submitted");
}
+ 5
Nolan Amadi the getInput() function is a generic function that asks for input with regexp pattern restriction, it is used in btn1() function so we don't have to write the while loop asking for input twice in btn1(), less lines needed, and if you want another input you can use it just like it had with the name and number input, of course with different pattern, prompt and alert messages. Shortly put, reusable function for reading input.
I didn't really get what you mean by embedding message, save your code in profile and share the URL so I can understand what you mean : )
+ 4
You're welcome, but why you call the btn1() function from the function itself? it will repeat over and over infinitely.
I think the loop that asks for the input can be wrapped in a function because they are basically doing the same thing, so I changed the script as follows:
function getInput(pattern, prompt_msg, alert_msg) {
while (true) {
var x = prompt (prompt_msg);
if (x === null) return null; // Cancelled
if (x.length === 0) return null; // Empty string
if (!x.match(pattern)) {
alert (alert_msg);
continue;
}
return x;
}
}
function btn1() {
var d = /^[A-Za-z]+$/;
var x = getInput(d, "Enter name", "Name must contain only alphabets");
if(x === null) {
alert("Thanks for visiting");
return false;
}
var e = /^[0-9]+$/;
var y = getInput(e, "Enter a number", "Enter numbers only");
if(y === null) {
alert("Thanks for visiting");
return false;
}
alert("Name: " + x + "\nNumber: " + y + "\nData Submitted");
}
+ 3
So you want to alert("Thanks for visiting") if the user press Cancel button, or press OK button without typing anything for name? what should happen if they enter a name, but then press Cancel, or OK without any input for number, should it show the same alert?
Nolan Amadi I have updated the code on previous post to check for possibility for Cancel button and empty string input (OK button without typing) check if that's the way you'd like it to work.
+ 2
I think you best save your full code in profile and post the code URL here so I can see what you mean, because when I run the code I don't experience what you said. If I hit the cancel button on name prompt it shows thank you alert, and so does with the number prompt, no need to hit the cancel button twice.
What do you mean close the opened function? did you mean the {} brackets? which part of it did I miss? tell some more details...
+ 1
Thanks Ipang. It worked!
function btn1(x, y) {
var d = /^[A-Za-z]+$/;
var e = /^[0-9]+$/;
var x;
while (true) {
x = prompt("Enter name");
if(!x.match(d)) {
alert("Name must contain only alphabets");
continue;
}
break;
}
var y;
while (true) {
y = prompt("Enter a number");
if(!y.match(e)) {
alert("Enter numbers only");
continue;
}
break;
}
alert("Name: " + x + "\nAge: " + y + "\nData Submitted");
btn1();
}
btn1();
+ 1
Thanks very much!
+ 1
This is great Ipang .
However, you created two functions. How could this two functions be closed in other to validate the program?
+ 1
Also, I tried embedding a message that would appear if the user hits the cancel button of the prompt box, but it didn't work.
I'd need a help here as well. 🙂
+ 1
I mean something like this. An alert message if the user refuses to fill the forms.
function btn1(x, y) {
var d = /^[A-Za-z]+$/;
var e = /^[0-9]+$/;
var x;
while (true) {
x = prompt("Enter name");
if(!x.match(d)) {
alert("Name must contain only alphabets");
continue;
if(""){
continue;
}
else if(x == null || x == ""){
alert("Thanks For Visiting");
}
}
break;
}
var y;
while (true) {
y = prompt("Enter a number");
if(!y.match(e)) {
alert("Enter numbers only");
continue;
}
break;
}
alert("Name: " + x + "\nAge: " + y + "\nData Submitted");
}
btn1();
+ 1
You did a great job Ipang via the updated code.
This is exactly what I want! Plus, I also want the alert box to show if the user inputs only name and later hit the cancel button of the number prompt section.
+ 1
Ran the updated code and found that the user needs to hit the cancel button twice before the alert message shows.
I'd like the user to get the message when the cancel button is tapped once.
Also, I don't want this to have an effect on the the OK button when tapped, instead the okay buttoned should be validated to getting an input!
+ 1
Why didn't you close the opened functions? Because I had to close it before the code worked.
Or closing it like I did was a wrong practice?
+ 1
Been working on this all this while but I kept missing a step.
Often have questions like this?
Learn more efficiently, for free:
Hot today
Problem
0 Votes
USING HTML ONLY!!!
5 Votes
Effects on HTML and JavaScript
0 Votes
Help. Помогите пожалуйста
1 Votes
Programming sickness
3 Votes
Izzy the iguana
0 Votes