1

I have a form that adds customer information. I would just like to know how to make a pop up alert box that warns the user that he/she has forgotten to fill up an important text field. I am not good in HTML or JavaScript so I need help on this.

pnuts
  • 58,317
  • 11
  • 87
  • 139
user3418987
  • 137
  • 2
  • 7
  • 16

4 Answers4

1

You can use the below example

<html>
<head>
<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("Name must be filled out");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" action="js"
onsubmit="return validateForm()" method="get">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

</body>
</html>
mahesh
  • 1,311
  • 1
  • 13
  • 26
1

Simple as hell :)

Just use the parameter "required" at your input field ( textfield / textarea etc. ).

<form method="post" name="Form" onsubmit="" action="">
    <input length="20" required=""></input>
    <input type="submit" value="Submit"></input>
</form>

A little text will show up if the textinput is empty when the user tries to submit the form! The form can only be submitted if every input that is marked as required is filled with text. Check out this simple fiddle :

http://jsfiddle.net/UL5pC/

Ephenodrom
  • 1,797
  • 2
  • 16
  • 28
0

Check this code example from this answer:

Replace the input fields with your fields of course and set up your own message if any of the fields is missing.

<script type="text/javascript">
    function validateForm()
    {
    var a=document.forms["Form"]["ans_a"].value;
    var b=document.forms["Form"]["ans_b"].value;
    var c=document.forms["Form"]["ans_c"].value;
    var d=document.forms["Form"]["ans_d"].value;
    if (a==null || a=="",b==null || b=="",c==null || c=="",d==null || d=="")
      {
      alert("Please Fill All Required Field");
      return false;
      }
    }
    </script>

<form method="post" name="Form" onsubmit="return validate()" action="">
<textarea cols="30" rows="2" name="ans_a" id="a">
<textarea cols="30" rows="2" name="ans_b" id="b">
<textarea cols="30" rows="2" name="ans_c" id="c">
<textarea cols="30" rows="2" name="ans_d" id="d"></textarea>
</form>
Community
  • 1
  • 1
Shlomo
  • 3,880
  • 8
  • 50
  • 82
0
import React from 'react';
const Uapp =()=>{
    return(
        <>
        <p>
         Type Your name <input required />
        </p>
        </>
    );
}
export  default Uapp;

Note - only add required syntax in input tag for alert message when user not enter anything in input box.

Simas Joneliunas
  • 2,890
  • 20
  • 28
  • 35
vishal
  • 3
  • 3