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.

venereology answered 10 months ago
Next > < Previous

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)
<!DOCTYPE html> <html lang="en"> <head>    <title>Form Display Example</title>    <script type="text/javascript">    function display() {...
<!DOCTYPE html> <html lang="en"> <head>    <title>Form Display Example</title>    <script type="text/javascript">    function display() {    dispWin = window.open('','NewWin','toolbar=no,status=no,width=300,height=200')       message = "<ul><li>NAME:" + document.form1.name.value;    message += "<li>ADDRESS:" + document.form1.address.value;    message += "<li>PHONE:" + document.form1.phone.value;    message += "</ul>";    dispWin.document.write(message); } </script> </head> <body>    <h1>Form Display Example</h1>    <p>Enter the following information. When you press the Display button, the data you entered will be displayed in a pop-up.</p>    <form name="form1" method="get" action="">   ...
A successful new user registration requires the following valid data: ⦁   User name: it must start...
A successful new user registration requires the following valid data: ⦁   User name: it must start with a letter and consist of only letters and digits without any space character. User name is case insensitive. Different users must have different user names. ⦁   Password: it must have at least six characters, consist of only letters, digits, and special characters (@, #, $, ^, &), and at least one upper-case letter, one lower-case letter, one digit, and one special character. ⦁  ...
Create an HTML form with the following: 2 text input fields 1 text area 2 radio...
Create an HTML form with the following: 2 text input fields 1 text area 2 radio buttons or 3 checkboxes 1 button Include labels for fields
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
Javascript 1. Write a function which receives four arguments (array, start, end, delimiter). Copy the array...
Javascript 1. Write a function which receives four arguments (array, start, end, delimiter). Copy the array values from the start to end index separated by delimiter\'s value. function([1,2,3,4],1,3,'*') // returns 2*3*4 as string 2. Write a function to change the case of all the characters in string based on their position which matches the value of the pos parameter passed to function(str, pos [even|odd]). Example: function(‘abCd’, ‘odd’) // returns Abcd 3 Write a function which receives two arguments (array, oddOrEven)...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT