website-developer-in-meerut
website-designer-in-meerut
freelance-webite-developer

Need an Eye-caching Website - Contact Me Today !

form-validation-in-jquery

Form Validation In PHP (Using Jquery)

  • 147
  • 06-Jan-2022
  • Details

    index.php
    <!DOCTYPE html>
    <html>
        <head>
            <title>Form Validation</title>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
            <link rel="stylesheet" href="style.css" />
        </head>
        <body>
            <div class="container">
                <form id="contact" action="action.php" method="post">
                    <h3>Form Validation In PHP</h3>
                    <h4>Using Jquery</h4>
                    <fieldset>
                        <input type="text" class="form-control shadow-none" name="name" id="name" placeholder="Enter Your Name" />
                    </fieldset>
                    <fieldset>
                        <input type="text" class="form-control shadow-none" name="email" id="email" placeholder="Enter Your Email" />
                    </fieldset>
                    <fieldset>
                        <input type="text" class="form-control shadow-none" name="contact" id="contact" placeholder="Enter Your Phone" />
                    </fieldset>
                    <fieldset>
                        <input type="password" class="form-control shadow-none" name="password" id="password" placeholder="Enter Password" />
                    </fieldset>
                    <fieldset>
                        <input type="password" class="form-control shadow-none" name="confirmpassword" id="confirmpassword" placeholder="Re-Enter Password" />
                    </fieldset>
                    <fieldset>
                        <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
                    </fieldset>
                </form>
            </div>
        </body>
        <script>
            $(document).ready(function () {
                $("#contact").validate({
                    rules: {
                        name: {
                            required: true,
                        },
                        email: {
                            required: true,
                            email: true,
                        },
                        contact: {
                            required: true,
                            rangelength: [10, 12],
                            number: true,
                        },
                        password: {
                            required: true,
                            minlength: 8,
                        },
                        confirmpassword: {
                            required: true,
                            equalTo: "#password",
                        },
                    },
                    messages: {
                        name: "Please enter Name.",
                        email: {
                            required: "Please enter Email Address.",
                            email: "Please enter a valid Email Address.",
                        },
                        contact: {
                            required: "Please enter Contact.",
                            rangelength: "Contact should be 10 digit number.",
                        },
                        password: {
                            required: "Please enter Password.",
                            minlength: "Password must be at least 8 characters long.",
                        },
                        confirmpassword: {
                            required: "Please enter Confirm Password.",
                            equalTo: "Confirm Password do not match with Password.",
                        },
                    },
                    submitHandler: function (form) {
                        form.submit();
                    },
                });
            });
        </script>
    </html>
    

     

    action.php
    <!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>Welcome</title>
    </head>
    <body>
        <h1>Form Submitted Successfully !</h1>
    </body>
    </html>

     

    style.css
    @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,200;
    0,300;
    0,400;
    0,500;
    1,100;
    1,200&display=swap');
     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         -webkit-font-smoothing: antialiased;
         -moz-font-smoothing: antialiased;
         -o-font-smoothing: antialiased;
         font-smoothing: antialiased;
         text-rendering: optimizeLegibility;
    }
     body {
         font-family: 'Josefin Sans', sans-serif;
         font-size: 12px;
         line-height: 30px;
         color: #777;
         background-color: #ff4e00;
         background-image: linear-gradient(315deg, #ff4e00 0%, #ec9f05 74%);
    }
     .container {
         max-width: 500px;
         width: 100%;
         margin: 0 auto;
         position: relative;
    }
     #contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="password"], #contact textarea, #contact button[type="submit"] {
         font-family: 'Josefin Sans', sans-serif;
    }
     #contact {
         background: #F9F9F9;
         padding: 25px;
         margin: 150px 0;
    }
     #contact h3 {
         display: block;
         font-size: 30px;
         font-weight: 300;
         margin-bottom: 10px;
    }
     #contact h4 {
         margin: 5px 0 15px;
         display: block;
         font-size: 13px;
         font-weight: 400;
    }
     fieldset {
         border: medium none !important;
         margin: 0 0 10px;
         min-width: 100%;
         padding: 0;
         width: 100%;
    }
     #contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
         width: 100%;
         border: 1px solid #ccc;
         background: #FFF;
         margin: 0 0 5px;
         padding: 10px;
    }
     #contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
         -webkit-transition: border-color 0.3s ease-in-out;
         -moz-transition: border-color 0.3s ease-in-out;
         transition: border-color 0.3s ease-in-out;
         border: 1px solid #aaa;
         font-weight: 300;
    }
     #contact textarea {
         height: 100px;
         max-width: 100%;
         resize: none;
    }
     #contact button[type="submit"] {
         cursor: pointer;
         width: 100%;
         border: none;
         background-color: #f7b42c;
         color: #FFF;
         margin: 0 0 5px;
         padding: 10px;
         font-size: 15px;
    }
     #contact button[type="submit"]:hover {
         background: #fac355;
         -webkit-transition: background 0.3s ease-in-out;
         -moz-transition: background 0.3s ease-in-out;
         transition: background-color 0.3s ease-in-out;
    }
     #contact button[type="submit"]:active {
         box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    }
     .copyright {
         text-align: center;
    }
     #contact input:focus, #contact textarea:focus {
         outline: 0;
         border: 1px solid #fac355;
    }
     ::-webkit-input-placeholder {
         color: #fac355;
         font-weight: 300;
    }
     :-moz-placeholder {
         color: #fac355;
         font-weight: 300;
    }
     ::-moz-placeholder {
         color: #fac355;
         font-weight: 300;
    }
     :-ms-input-placeholder {
         color: #fac355;
         font-weight: 300;
    }
     .error {
         color: #f38003;
    }
    

whatsapp

Sagar Kumar
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat