Q13

Question 13

PreviousQ12 NextQ14

Last updated 4 years ago

Q13

Question 13

Create a student registration form. Create functions to perform the following checks:

a. Roll number is a 7-digit numeric value

b. Name should be an alphabetical value(String)

c. Non-empty fields like DOB

Wrote function to check length of input Roll no, Name contains only alphabets using regex, and if DOB is empty or not.

Code

<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <title>Student Registration Form | Javascript 1</title>
    
    <script>
        function validf() {
            var roll=document.stform.roll.value;
            var name = document.stform.name.value;
            var dob = document.stform.dob.value;

            if(checkName(name) && checkRoll(roll) && 
            checkDob(dob)) {
                alert("Data Saved Successfully");
                return true;
            } else {
                return false;
            }
        }

        function checkRoll(roll) {
            if(roll.length == 7) {
                return true;
            }
            else {
            alert('Roll Number should be of 7 digits only');
            }
        }

        function checkName(name) {
            if(name.match("^[a-zA-Z]+")) {
                return true;
            } else {
                alert("Name should be alphabetic only");
                return false;
            }
        }

        function checkDob(dob) {
            if(dob !== "") {
                return true;
            } else {
                alert("DOB cannot be empty");
                return false;
            }
        }
    </script>
</head>
<body>

<div class="container-fluid ">
    <center>
    
        <div class="container mt-5">
            <h1>Student Registration Form | Javascript 1 </h1>
            </div>
      </center>     

        <form 
        name="stform" 
        onsubmit="validf()" 
        method="post">
        
    <div class="form-group">
        <div class="container-fluid mt-5 ">
            <div class="container mt-2">
                <label for="nname">Full Name</label>
            </div>
            
            <div class="container mt-2">
                <input type="text" 
                class="form-control w-75 p-3" 
                id="nname" 
                name="name" 
                placeholder="Enter Full Name">
                
            </div>
            <div class="container mt-2">
            <label for="roll">Roll Number</label>
        </div>
        
            <div class="container mt-2">
                <input type="number" 
                class="form-control w-75 p-3" 
                id="roll" name="roll" 
                placeholder="Your 7 Digit Roll Number">
                
            </div>
            
            <div class="container mt-2">
                <label for="dob">Date Of Birth</label>
            </div>
            
            <div class="container mt-2">
                <input type="date" 
                class="form-control w-75 p-3" 
                id="dob" name="dob" 
                placeholder="01/01/1950" >
            </div>
            
            <div class="container mt-3 mx-10">
                <input type="submit" 
                formmethod="post" 
                class="btn btn-primary" 
                value="Save Data">
            </div>
        </div>
    </div>
</form>
</div> 
</body>
</html>

Output

Try or Test The Corresponding Code Here

PreviousQ12 NextQ14

Last updated 4 years ago