Codelybrary: JS : Form Validtaion and DateTime formatting

Sunday, July 1, 2018

JS : Form Validtaion and DateTime formatting

This is an example :

<!DOCTYPE html>
<html>
<head>

<style>
body {background-color: lightgray;}
h2   {color: blue;}
p    {color: red;}
</style>

</head>
<body>
<fontcolor =magenta><h2 align=center >IGNOU Varanasi students Records</h2></font>
Today is <span id = "t"></span>    Time:     <span id="time"> </span>     Date & Time: <span id="dtime"></span>
<br><hr>
<form name="myForm" action="/formValidation.html"
onsubmit="return validateForm()+ validateEmail(email)" method="post" id="myForm">
Name: <input type="text" name="fname">

<hr><br><br>
Qualification: <input type="text" name="fqualification">
<hr><br><br>
Age : <input type="text" name="fage" required>
<hr><br><br>
Email: <input type="text" name="femail" id="email">
<span id="split"></span>

<p>Please input a number between 1 and 10:</p>

<input id="numb" name="fnumb">
<p id="demo"></p>
<p id="proceed"></p>
<hr>
<input type="button" onclick="myFunction()" value="Reset form">
<p id ="sub"><input type="submit" value="Submit" id="submit"></p>
</form>
<script>

/*
getFullYear() - Returns the 4-digit year
getMonth() - Returns a zero-based integer (0-11) representing the month of the year.
getDate() - Returns the day of the month (1-31).
getDay() - Returns the day of the week (0-6). 0 is Sunday, 6 is Saturday.
getHours() - Returns the hour of the day (0-23).
getMinutes() - Returns the minute (0-59).
getSeconds() - Returns the second (0-59).
getMilliseconds() - Returns the milliseconds (0-999).
getTimezoneOffset() - Returns the number of minutes between the machine local time and UTC.

*/
    var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

    var string = "Central University";
    var result = string.split(" ");
    var res='['+ '"'+result[0]+'"'+' "' + result[1]+ '"'+']';
    document.getElementById("split").innerHTML=res;
var email=document.getElementById("email").value;
var today=new Date();
//d = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
//var d= days[today.getDay()]+" "+(today.getMonth()+1)+'-'+today.getDate()+'-'+today.getFullYear();
var min=today.getMinutes() ;
var sec=today.getSeconds() ;
if (min < 10) {
    min = "0" + min;
}
if (sec < 10) {
    sec = "0" + sec;
}
var hr = today.getHours();
var ampm = "am";
if( hr > 12 ) {
    hr -= 12;
    ampm = "pm";
}
if (hr < 10) {
    hr = "0" + hr;
}
var d= days[today.getDay()]+" "+(today.getMonth()+1)+'-'+today.getDate()+'-'+today.getFullYear();
//var time = today.getHours()+" AM " + ":" + today.getMinutes() + ":" + today.getSeconds();
//var time = today.getHours()+ ampm + ":" + today.getMinutes() + ":" + today.getSeconds();
var time = hr+" "+ ampm + " : " + min + " : " + sec;
var dateTime=d +'    '+time;
//var d =new Date();
//if (today.getMinutes() < 10) {
// today.getMinutes() = "0" +today.getMinutes();
//}
document.getElementById("time").innerHTML = time;
document.getElementById("t").innerHTML = d;
document.getElementById("dtime").innerHTML = dateTime;
function myFunction() {
    document.getElementById("myForm").reset();
    }
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    var y = document.forms["myForm"]["fqualification"].value;
    if(x==""||y==""){
        alert("Name and Qualification must be filled out");
        return false;
    }
    if (x == "") {
        alert("Name must be filled out");
        return false;
    }
    //var y = document.forms["myForm"]["fqualification"].value;
    if (y == "") {
        alert("Qualification must be filled out");
        return false;
    }
    var z=document.forms["myForm"]["fnumb"].value;
    if (z == "") {
        alert("Number must be filled out");
        return false;
    }
    if (isNaN(z) || z < 1 || z > 10) {
        text = "Input not valid";
        alert("Wrong Input not valid");

    } else {
        text = "All Inputs OK";
        document.getElementById("proceed").innerHTML="<input type=submit value=Proceed>";
        document.getElementById("sub").innerHTML="";

    }
    document.getElementById("demo").innerHTML = text;



}

function validateEmail(email){
    var reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if(reg.test(email)){
        return true;
    }
    else{
    alert('Please enter valid email.');
    return false;
    }
}
</script>

</body>
</html>

page:

Codelybrary

I am also active at:

Sunday, July 1, 2018

JS : Form Validtaion and DateTime formatting

No comments:

Post a Comment

इश्क में ग़ैरत-ए-जज़्बात ने रोने ना दिया - सुदर्शन फ़ाकिर

Search This Blog