Question

In: Computer Science

JavaScript Form Validation Name: a text box where the content must start with 1 upper case...

JavaScript Form Validation

Name: a text box where the content must start with 1 upper case characters and no special character (i.e. !, @, #, $, %, &, *). Number is not allowed. The text box must not be empty.


Module code: a text box where the content must start with 3 lower case alphabets and follows by 4 digits where the first digit cannot be zero. This textbox can be empty.

All validation error messages must be italic and in red colour and besides the HTML element.

There should be a validation error displayed for every error.

Example:

If the user enters a number and special characters in the Name textbox, a message should say on the side "Numbers are not allowed!" in red and italic.

If the user leaves the name Textbox empty after submission, there should be an error message on the side saying "Name cannot be empty!"

If the user enters uppercase characters followed by the number starting with zero in the Module code TextBox, a message should say on the side "Content must start with 3 lower case alphabets!" followed by "First digit cannot be zero!"

Solutions

Expert Solution

<html>
<body>

Name: <input type="text" id="txtName"/>
<br/>
<br/>
Module code: <input type="text" id="txtName1"/>
<br/>
<br/>
<input type="button" value="Submit" onclick="Validate()"/>

<script>
function Validate() {
  
var regex = /^[A-Za-z]+$/ //Regex for Valid Characters i.e. Alphabets.
var isValid =regex.test(document.getElementById("txtName").value);//Validate TextBox value against the Regex.
x=document.getElementById("txtName").value //getting user data from html
if(document.getElementById("txtName").value == ""){ //if input is empty
        alert("Name cannot be empty!"); //alert message
}
else{//if input is non empty
if (!isValid) { //if input contain special character (i.e. !, @, #, $, %, &, *) and Numbers
alert("Numbers are not allowed!"); //alert message
} else {// //if input does not contain special character
    var y=document.getElementById("txtName").value.charAt(0)//starting character of input
       if(y>='A' && y<='Z'){ //if starting with a upper case alphabet
alert("Text is validate.");
}
else{//if starting aplhabet is not a upper case alphabet
alert("Numbers are not allowed!");
}
}
}
var x1=document.getElementById("txtName1").value//getting user data from html
var x2=x1.substring(0,3);//statrting sub string
var x4=document.getElementById("txtName1").value.charAt(3); //4th digit to check for zero
var x3=x1.substring(4,6); //sub string
var regex1 = /^[a-z]+$/ //regrex for starting should be lower case aplhabet
var isValid1 =regex1.test(x2);
var regex2 = /^[0-9]+$/ //regrex for after 3 aplhabets should be number
var isValid2 =regex2.test(x3);
if(!isValid1) { //if input does not start with 3 alphabets
        alert("Content must start with 3 lower case alphabets!");
}
else{
    if(!isValid2){ //if input does start with 3 alphabets
alert("input must be number!");
}
else{//check for 4 digit
if(x4!='0'){ //check for 4th digit is not zero
alert("Accepted");
}
else{ //check for 4th digit is zero
alert("Content must start with 3 lower case alphabets and First digit cannot be zero!");
}
}
}
return isValid;
}
</script>

</body>
</html>

input:

output :

input 2:

If you found this answer helpful please give a thumbs up.


Related Solutions

javaScript html receives an entry of a character string in a text box, when a button...
javaScript html receives an entry of a character string in a text box, when a button is clicked, the count of vowels in the string stored in the textbox is displayed. The html file contains one function: vowelcount(). vowelcount(): returns the number of uppercase and lowercase English language vowel letter that occurs in the string entry in the textbox. //html: <!--    YOUR ID    YOUR NAME --> <html> <head> <script> function vowelcount() {        /* YOUR CODE HERE...
Using Javascript Create a page places an order for a Calzone: Using Text box to get...
Using Javascript Create a page places an order for a Calzone: Using Text box to get customers Name Radio Buttons for sizes: small, medium, large list for type of crust: crispy, soft, hard check boxes for toppings, with at least 3 to be selected Submit button that displays the order information.
please, the answers must be in computer form the name of the course is maternal and...
please, the answers must be in computer form the name of the course is maternal and child health Q1. (a) Discuss about perinatal mortality rates, still birth rates and neonatal mortality rates among India, China, Japan and France. (b) What intervention can be done to improve perinatal health in developing countries? Q2. Discuss major challenges for the health systems in improving maternal and child health
Tax Prep Where does box 1 of Mortage Interest Statement from Form 1098 go on Schedule...
Tax Prep Where does box 1 of Mortage Interest Statement from Form 1098 go on Schedule A? I can only find a place for Real Estate Taxes (Box 11) on the tax software
Ehrman notes that Form Criticism is concerned to know three things about a biblical text. Name...
Ehrman notes that Form Criticism is concerned to know three things about a biblical text. Name and describe them: ( i will very appreciate you help me)
Create a very simple temperature converter form having two text fields. The first one is where...
Create a very simple temperature converter form having two text fields. The first one is where the user will enter temperature. The second field is where the computed temperature value is displayed depending on the unit (F or C).use html and javascript
1-ANSWER THE QUESTIONS AND LIST YOUR SOURCES ADEQUATELY ( IN-TEXT & IN A LIST): A) NAME...
1-ANSWER THE QUESTIONS AND LIST YOUR SOURCES ADEQUATELY ( IN-TEXT & IN A LIST): A) NAME STEVE JOBS’ TOP 10 RULES FOR SUCCESS. B) 1) DEFINE EACH RULE BRIEFLY AND 2) FIND ONE EXAMPLE FOR 3 OF THEM. YOUR EXAMPLES MUST RELATE TO A BUSINESS ACTION THAT APPLE HAS TAKEN. ( RESEARCH THE COMPANY WEBSITE AND THE NEWS THE HELP YOU).
1. There are 9 members on a board of directors. If they must form a subcommittee...
1. There are 9 members on a board of directors. If they must form a subcommittee of 6 members, how many different subcommittees are possible? 60,480 720 84 531,441 2. A card is drawn at random from a well-shuffled deck of 52 cards. What is the probability of drawing a face card or a 5? 16 3. A pitching machine throws 70% strikes and 30% balls. Five pitches will be thrown by the machine. What is the probability the machine...
1. Where are they found? 2. What is the name for the reproductive structure?
Kingdoms Bacteria, Protista, and Fungi Fungus Presentations Phylum Chytridiomycota 1. Where are they found?  2. What is the name for the reproductive structure? Drawing of the reproductive structure: 3. How do they get their food? 4. Some common examples of these fungi are:
This case presents students with three different situations where they must determine the appropriate research design....
This case presents students with three different situations where they must determine the appropriate research design. 1. Describe what research design you would recommend for each of client. 2. For each research design you selected for the three clients, discuss why you believe your choice of design is the correct choice.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT