Task - Form Validation #17

akash-coded · 2022-02-19T16:08:33Z

akash-coded
Feb 19, 2022
Maintainer

Write validation logic for name, phone number, and DOB fields.

Wgjamia · 2022-02-19T17:14:11Z

Wgjamia
Feb 19, 2022

I'm not compteted still this code

this javascript

function validateName(name){
    var regName = /^[a-zA-Z]+ [a-zA-Z]+$/;
    if(!regName.test(name)){
        alert('Please enter your full name (first & last name).');
        document.getElementById('name').focus();
        return false;
    }else{
        alert('Valid name given.');
        return true;
    }
}
function phonenumber(inputtxt)
{
  var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
  if(inputtxt.value.match(phoneno))
     {
	   return true;      
	 }
   else
     {
	   alert("Not a valid Phone Number");
	   return false;
     }
}

function validatedate(inputText)
  {
  var dateformat = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;
  // Match the date format through regular expression
  if(inputText.value.match(dateformat))
  {
  document.form1.text1.focus();
  //Test which seperator is used '/' or '-'
  var opera1 = inputText.value.split('/');
  var opera2 = inputText.value.split('-');
  lopera1 = opera1.length;
  lopera2 = opera2.length;
  // Extract the string into month, date and year
  if (lopera1>1)
  {
  var pdate = inputText.value.split('/');
  }
  else if (lopera2>1)
  {
  var pdate = inputText.value.split('-');
  }
  var dd = parseInt(pdate[0]);
  var mm  = parseInt(pdate[1]);
  var yy = parseInt(pdate[2]);
  // Create list of days of a month [assume there is no leap year by default]
  var ListofDays = [31,28,31,30,31,30,31,31,30,31,30,31];
  if (mm==1 || mm>2)
  {
  if (dd>ListofDays[mm-1])
  {
  alert('Invalid date format!');
  return false;
  }
  }
  if (mm==2)
  {
  var lyear = false;
  if ( (!(yy % 4) && yy % 100) || !(yy % 400)) 
  {
  lyear = true;
  }
  if ((lyear==false) && (dd>=29))
  {
  alert('Invalid date format!');
  return false;
  }
  if ((lyear==true) && (dd>29))
  {
  alert('Invalid date format!');
  return false;
  }
  }
  }
  else
  {
  alert("Invalid date format!");
  document.form1.text1.focus();
  return false;
  }
  }

--
this HTML Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Information</title>
    <link rel="stylesheet" href="./bootstrap-5.1.3-dist/css/bootstrap.min.css">
</head>
<body>
    <main>
        <div class="container m-md-4 h-100 card-body mx-lg-auto">
            <div class=" col col-md-8 h-100 card border-1 shadow alert-primary align-self-center">
                <form action="">
                    <div class="form-control col-md-6 alert-primary border-0">
                        <label for="name" class="text-break m-1">Name:</label>
                        <input type="text" name="name" id="name" class="form-control">
                    </div>
                    <div class="form-control col-md-6 alert-primary border-0">
                        <label for="phone" class="text-break m-1">Phone Number:</label>
                        <input type="text" name="phone" id="phone" class="form-control">
                    </div>
                    <div class="form-control col-md-6 alert-primary border-0">
                        <label for="dob" class="text-break m-1">Date Of Birth:</label>
                        <input type="date" name="dob" id="dob" class="form-control">
                    </div>

                    <button class="justify-content-center btn btn-primary col-md-4 m-md-5">Submit</button>
                </form>

            </div>
        </div>
    </main>
    <script src="./bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
</body>
</html>

1 reply

Wgjamia Feb 19, 2022

ramprasana · 2022-02-19T17:21:22Z

ramprasana
Feb 19, 2022

`
function validateInputField() {
let name = document.getElementById("name").value;
let phoneNo = document.getElementById("phonenumber").value;
let dob = document.getElementById("dob").value;

    name = name.trim();
    phoneNo = phoneNo.trim();
    dob = dob.trim();

    const dobPattern = /\d\d-\d\d-\d\d\d\d/;
    const phonePaterrn = /\d\d\d-\d\d\d-\d\d\d\d/;
    if(dobPattern.test(phoneNo)) {
        document.getElementById("passwordHelp").innerText = "Date must be in DD-MM-YYYY";
    }

    if(phonePattern.test(phonePaterrn)) {
        document.getElementById("passwordHelp").innerText = "Date must be in XXX-XXX-XXXX";
    }

  }`

0 replies

Meharafsha · 2022-02-19T17:32:50Z

Meharafsha
Feb 19, 2022

<title>Forms</title>

First name:*

  <div id="lastNameField" name="nameField">
    <label for="lname">Last name:</label><br />
    <input type="text" id="lname" name="lname" /><br />
  </div>
  <div id="Phone Number" name="Phone NumberField">
    <label for="Phone number">Phone Number:</label><br />
    <input type="number" id="Phone Number" name="Phone Number" /><br />
  </div>
  <label for="Phone number">Date of birth:</label><br />
  <input type="date" name="begin" 
    placeholder="dd-mm-yyyy" value=""
    min="1997-01-01" max="2030-12-31">
  <div id="submitButton">
    <input type="submit" value="Submit" />
  </div>
</form>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Task - Form Validation #17

Uh oh!

{{title}}

Uh oh!

Replies: 3 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Task - Form Validation #17

Uh oh!

akash-coded Feb 19, 2022 Maintainer

Replies: 3 comments · 1 reply

Uh oh!

Uh oh!

Wgjamia Feb 19, 2022

I'm not compteted still this code

this javascript

Uh oh!

Wgjamia Feb 19, 2022

Uh oh!

ramprasana Feb 19, 2022

Uh oh!

Meharafsha Feb 19, 2022

akash-coded
Feb 19, 2022
Maintainer

Replies: 3 comments 1 reply

Wgjamia
Feb 19, 2022

ramprasana
Feb 19, 2022

Meharafsha
Feb 19, 2022