Form Validation Using Jquery Examples - HTML

Form Validation Using Jquery Examples - HTML

Soeng Souy

Form Validation Using Jquery Examples - HTML



1.index.php
<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' 
    integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/form-doc.css">
    <link href='https://fonts.googleapis.com/css?family=Bayon|Francois+One' rel='stylesheet' type='text/css'>
    <script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
        <!-- Bootstrap core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- Material Design Bootstrap -->
        <link href="css/mdb.min.css" rel="stylesheet">
        <!-- Your custom styles (optional) -->
        <link href="css/styles.css" rel="stylesheet">
        <link href="css/style.min.css" rel="stylesheet">

</head>
<body>

<section class="contact-section my-5">
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-md-8 rounded "> 
                <div class="card">
                    <div class="row"><!-- Grid row -->
                        <div class="col-lg-8"><!-- Grid column -->
                            <div class="card-body form"><!-- Header -->
                                <h3 class="mt-4"><i class="fas fa-envelope pr-2"></i>Write to us: Soeng Souy</h3>
                                <form id=registration_form action="" method="post">
                                    <div class="row"><!-- Grid row -->
                                        <div class="col-md-6"><!-- Grid column -->
                                            <div class="md-form mb-0">
                                                <input type="text"id="form_username" name="form_name" class="form-control" placeholder="Your name" required>
                                                <span class="error_form" id="username_error_message"></span>
                                            </div>
                                        </div><!-- Grid column -->
                                        <div class="col-md-6"><!-- Grid column -->
                                            <div class="md-form mb-0">
                                                <input type="email" id="form_email"name="form_email" class="form-control" placeholder="Your email"required>
                                                <span class="error_form" id="email_error_message"></span>
                                            </div>
                                        </div><!-- Grid column -->
                                    </div><!-- Grid row -->
                                    <div class="row"><!-- Grid row -->
                                        <div class="col-md-6"><!-- Grid column -->
                                            <div class="md-form mb-0">
                                                <input type="text" id="form_phone" name="form_phone" class="form-control" placeholder="Your phone"required>
                                                <span class="error_form" id="phone_error_message"></span>
                                            </div>
                                        </div><!-- Grid column -->
                                        <div class="col-md-6"><!-- Grid column -->
                                            <div class="md-form mb-0">
                                                <input type="text" id="form_company"name="form_company" class="form-control"placeholder="Your company" required>
                                                <span class="error_form" id="company_error_message"></span>
                                            </div>
                                        </div><!-- Grid column -->
                                    </div><!-- Grid row -->
                                    <div class="row"><!-- Grid row -->
                                    <div class="col-md-12"><!-- Grid column -->
                                            <div class="md-form mb-4">
                                                <!--Textarea with icon prefix-->
                                                <div class="md-form amber-textarea active-amber-textarea">
                                                    <textarea id="form_comment"name="form_comment" class="md-textarea form-control" rows="3" placeholder="Your message"required></textarea>
                                                    <span class="error_form" id="comment_error_message"></span>
                                                </div>
                                                <button type="submit"class="btn btn-outline-info btn-rounded text-black" id="Send" name="Send">SEND
                                                    <i class="far fa-paper-plane"></i>
                                                </button>
                                            </div>
                                        </div><!-- Grid column -->
                                    </div><!-- Grid row -->
                                </form>
                            </div>
                        </div><!-- Grid column -->
                        <div class="col-lg-4"><!-- Grid column -->
                            <div class="card-body contact text-center h-100 white-text" style="background-color: #103f6d;">
                                <h3 class="my-4 pb-2">Contact information</h3>
                                <ul class="text-lg-left list-unstyled ml-4">
                                    <li>
                                        <p><i class="fas fa-map-marker-alt pr-2"></i>Phnom Penh, 12000, Kh</p>
                                    </li>
                                    <li>
                                        <p><i class="fas fa-phone pr-2"></i>+855 0966686371</p>
                                    </li>
                                    <li>
                                        <p><i class="fas fa-envelope pr-2"></i>soengsouy.com</p>
                                    </li>
                                </ul>
                                <hr class="hr-light my-4">
                                <ul class="list-inline text-center list-unstyled">
                                    <li class="list-inline-item">
                                        <a class="p-2 fa-lg tw-ic">
                                        <i class="fab fa-twitter-square"></i>
                                        </a>
                                    </li>
                                    <li class="list-inline-item">
                                        <a class="p-2 fa-lg li-ic">
                                        <i class="fab fa-linkedin-in"> </i>
                                        </a>
                                    </li>
                                    <li class="list-inline-item">
                                        <a class="p-2 fa-lg ins-ic">
                                        <i class="fab fa-instagram"> </i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div><!-- Grid column -->
                    </div><!-- Grid row -->
                </div><!-- Form with header -->
            </div>
        </div>
    </div>
</section>
<!-- Section: Contact v.3 -->

</body>
</html>

2.style.css

.error_form {
  font-size: 15px;
  font-family: Arial;
  color: #FF0052;
}

3.script.js

  $(function()
{
    $("#username_error_message").hide();
    $("#email_error_message").hide();
    $("#phone_message").hide();
    $("#company_error_message").hide();
    $("#comment_error_message").hide();
    var error_username  = false;
    var error_email     = false;
    var error_phone     = false;
    var error_company   = false;
    var error_comment   = false;
    $("#form_username").focusout(function()
    {
        check_username();
    });
    $("#form_email").focusout(function()
    {
        check_email();
    });
    $("#form_phone").focusout(function()
    {
        check_phone();
    });
    $("#form_company").focusout(function()
    {
        check_company();
    });
    $("#form_comment").focusout(function()
    {
        check_comment();
    });
    function check_username()
    {
        var username_length = $("#form_username").val().length;
        
        if(username_length < 5 || username_length > 20) 
        {
            $("#username_error_message").html("name 5-20 characters");
            $("#username_error_message").show();
            error_username = true;
        }
        else
        {
            $("#username_error_message").hide();
        }
    }
    function check_email() {
        var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);
        if(pattern.test($("#form_email").val())) {
            $("#email_error_message").hide();
        } else {
            $("#email_error_message").html("Invalid email address");
            $("#email_error_message").show();
            error_email = true;
        }
    }
    function check_phone() {
        var phone_length = $("#form_phone").val().length;
        if(phone_length < 8) {
            $("#phone_error_message").html("phone 9-10 characters");
            $("#phone_error_message").show();
            error_phone = true;
        }
         else 
        {
            $("#phone_error_message").hide();
        }
    }
    function check_company()
    {
        var company_length = $("#form_company").val().length;
        
        if(company_length < 5 || company_length > 20) 
        {
            $("#company_error_message").html("Company name 5-20 characters");
            $("#company_error_message").show();
            error_company = true;
        }
        else
        {
            $("#company_error_message").hide();
        }
    }
    function check_comment() 
    {
        var comment_length = $("#form_comment").val().length;
        if(comment_length < 10 || coomment_length > 20) 
        {
            $("#comment_error_message").html("Should be between 10-20 characters");
            $("#comment_error_message").show();
            error_comment = true;
        }
        else
        {
            $("#comment_error_message").hide();
        }
    }
    $("#registration_form").submit(function()
    {
        error_username  = false;
        error_email     = false;
        error_phone     = false;
        error_company   = false;
        error_comment   = false;
        check_username();
        check_email();
        check_phone();
        check_company();
        check_comment();

        if(error_username == false && error_email == false && error_phone == false && company == false && comment == false)
        {
            return true;
        }
         else
        {
            return false;
        }
    });             
});
Reactions
Soeng Souy

Posted by Soeng Souy

Website that learns and reads, PHP, Framework Laravel, How to and download Admin template sample source code free.

Post a Comment

1 Comments

CAN FEEDBACK

Emoji
(y)
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)

close