Scribd Logo
Upload

Welcome to Scribd!

  • Menu Drop Down

    Uploaded by

    jabi
    3 views5 pages
    thi is

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    thi is

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    3 views5 pages

    Menu Drop Down

    Uploaded by

    jabi
    thi is

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    <!

    doctype html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">

    <title>Form</title>
    </head>
    <style >

    body{
    background:grey;
    margin: 0;
    }

    .formPanel{
    width: 500px;
    height: 400px;
    background: gold;
    margin: 0 auto;
    display: flex;
    align-items: center;
    border-radius: 30px;
    margin-top: 15%;
    }
    form{
    margin-left: 100px;
    }

    input[type='text']{

    margin-bottom: 15px;
    font-size: 20px;
    border:none;
    background: gold;
    border-bottom:1px solid lightgrey;
    }

    input[type='text']:focus{
    outline-style:none;
    box-shadow:none;
    border-color:transparent;
    border-bottom: 3px solid cyan;
    transition: 0.5s ease-in-out;
    }

    .checkBtnClass{

    font-size:20px;
    background:orange;
    border:none;
    border-radius: 10px;
    margin-top: 20px;
    margin-left: 250px;

    .checkBtnClass:hover{
    background:cyan;

    .snowflake {
    color: #fff;
    font-size: 1em;
    font-family: Arial, sans-serif;
    text-shadow: 0 0 5px #000;
    }

    @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes
    snowflakes-shake{0%,100%{-webkit-
    transform:translateX(0);transform:translateX(0)}50%{-webkit-
    transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-
    fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%
    {transform:translateX(0)}50%
    {transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-
    webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-
    select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-
    shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-
    function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-
    webkit-animation-play-state:running,running;animation-name:snowflakes-
    fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-
    function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-
    play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-
    delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-
    animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:30%;-
    webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3)
    {left:50%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-
    type(4){left:75%;-webkit-animation-delay:2s,2s;animation-
    delay:2s,2s}.snowflake:nth-of-type(5){left:90%;-webkit-animation-
    delay:8s,3s;animation-delay:8s,3s}

    </style>
    <body>
    <div class="formPanel">
    <form>

    <input type="text" name="Name" placeholder="Name" id='inputNameId' autofocus


    required/><span></span>

    <input type="text" name="Surname" placeholder="Surname" id="inputSurnameId"


    required/>

    <input type="text" name="Phone" placeholder="Phone" id="inputPhoneId"


    required/>

    <input type="text" name="Mail" placeholder="Mail" id="inputMailId">

    <button type="submit" id="checkBtnId" class="checkBtnClass">Check</button>


    </form>
    </div>

    <div class="snowflakes" aria-hidden="true">


    <div class="snowflake">
    ❅
    </div>
    <div class="snowflake">
    ❆
    </div>
    <div class="snowflake">
    ❅
    </div>
    <div class="snowflake">
    ❆
    </div>
    <div class="snowflake">
    ❅
    </div>
    </div>

    <script >
    var ValidateFormManager = {

    str: /[A-z]/g,
    symbols: /[-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/]/,
    num: /[0-9]/g,
    mailRegEx: /[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}/ig,
    phoneRegEx: /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{6}/,

    inputName:document.getElementById('inputNameId'),

    inputSurname: document.getElementById('inputSurnameId'),

    inputPhone:document.getElementById('inputPhoneId'),

    inputMail:document.getElementById('inputMailId'),

    validate: function () {
    this.checkName();
    this.checkSurname();
    this.checkPhoneNo();
    this.checkEmail();
    },

    checkName:function() {
    if (!this.str.test(this.inputName.value) || this.inputName.value == '' ||
    this.inputName.value.match(this.num) || this.inputName.value.match(this.symbols) ||
    this.inputName.value[0] != this.inputName.value[0].toUpperCase()) {
    this.inputName.style.border = "3px solid red";
    alert("Invalid name or name is empty or must be without number or must not
    contain symbols or starts with UPPERCASE");
    } else {
    this.inputName.style.background = "lime";
    this.inputName.style.border = "2px solid green";
    }
    },

    checkSurname:function() {

    if (!this.inputPhone.test( this.inputPhone.value) || this.inputSurname == '' ||


    this.inputSurname.value.match(this.num) ||
    this.inputSurname.value.match( this.symbols) || this.inputSurname.value[0] !=
    this.inputSurname.value[0].toUpperCase()) {
    this.inputSurname.style.border = "3px solid red";
    alert("Invalid surname or surname is empty or must be without number or must
    not contain symbols or starts with UPPERCASE");

    } else {
    this.inputSurname.style.background = "lime";
    this.inputSurname.style.border = "2px solid green";
    }
    },

    checkPhoneNo:function(){

    if(!this.inputPhone.test( this.inputPhone.value) ||
    this.inputPhone.value==''){
    this.inputPhone.style.border="3px solid red";
    alert("Invalid phone number or phonenumber is empty");
    }else{
    this.inputPhone.style.background="lime";
    this.inputPhone.style.border="2px solid green";
    }
    },

    checkEmail:function(){

    if(!this.mailRegEx.test(this.inputMail.value) || this.inputMail.value==''){
    this.inputMail.style.border="3px solid red";
    alert("Invalid email or email is empty");
    }else{
    this.inputMail.style.background="lime";

    }
    },

    foo:function(){
    return this.str.test(this.inputName.value);
    }

    fix:this.foo.bind(ValidateFormManager),

    initCheckButton:function(){
    var checkBtn = document.getElementById("checkBtnId");
    // add click listener for check button
    checkBtn.addEventListener('click', function () {
    if( fix() && this.str.test(this.inputSurname.value) &&
    this.phoneRegEx.test( this.inputPhone.value) &&
    this.mailRegEx.test(this.inputMail.value)){
    alert("All fields are correct. Thank you!");
    }
    });
    }

    window.addEventListener('load', function () {
    ValidateFormManager.initCheckButton();
    });

    </script>

    </body>

    </html>

    You might also like