PHP JavaScript: CSS and JavaScript ?

The code that every web developer looking for. Validating a form in all possible ways. A simple and effective code is here.

Here we are validating all common input types which we use in register form like name, email, phone, password, radio button, select option.

Includes

Script

function Validate() {

(function ($) {

jQuery.validator.setDefaults({
errorPlacement: function (error, element) {
error.appendTo('#invalid-' + element.attr('id'));
}
});

//To validate letters

$.validator.addMethod("letters", function (value, element) {

return this.optional(element) || value == value.match(/^[a-zA-Z\s]*$/);
});

//To validate Number

$.validator.addMethod("number", function (value, element) {

return this.optional(element) || value == value.match(/^[0-9]*$/);

});

//To validate digits for phone number that should start with only 7 or 8 or 9

$.validator.addMethod("digits", function (value, element) {

return this.optional(element) || value == value.match(/^^[789]\d{9}$/);

});

//To validate password

$.validator.addMethod("pwcheckNumber",

function (value, element) {

return /\d/.test(value);

});

$.validator.addMethod("pwcheckUppercase",

function (value, element) {

return /[A-Z]/.test(value);

});

$.validator.addMethod("pwcheckSpecial",

function (value, element) {

return /[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/.test(value);

});

//Form validation

$("#Form").validate({

rules: {

Title: {

required: true,

FirstName: {

required: true,

minlength: 3,

letters: true

Mobile: {

required: true,

number: true,

minlength: 10,

maxlength: 10,

digits: true

Email: {

required: true,

email: true,

Password: {

required: true,

minlength: 8,

pwcheckNumber: true,

pwcheckUppercase: true,

pwcheckSpecial: true,

ConfirmPassword: {

required: true,

equalTo: "#Password"

Gender: {

required: true,

}

//Message suggestions that you see on screen

messages: {

Title: {

required: "Please select title",

FirstName: {

required: "Please enter first name",

minlength: "Name should be minimum 3 characters",

letters: "Only letters and spaces are allowed",

Mobile: {

required: "Please enter phone number",

minlength: "Please enter valid phone number",

maxlength: "Please enter valid phone number",

digits: "Phone number should be start with 789",

Email: {

required: "Please enter email",

minlength: "Please enter a valid email address",

Password: {

required: "Please enter password",

minlength: "Password must be minmum 8 character",

pwcheckNumber: "Password must contains one digit",

pwcheckUppercase: "Password must contains atleast one uppercase letter",

pwcheckSpecial: "Password must contains atleast one special character",

ConfirmPassword: {

required: "Please enter confirm password ",

equalTo: "Confirm password must same as password",

Gender: {

required: "Please select gender type"

}

});

})($);

}

</script>

//CSS

<style>

.error_msg {

color: red;

}

body{

position: absolute;

width: 600px;

height: 200px;

z-index: 15;

top: 15%;

left: 30%;

margin: -100px 0 0 -150px;

}

.box-header{

background: #dc3545;

width: 500px;

height: auto;

text-align: center;

color: white;

font-size: 30px;

padding: 10px;

}

.box{

background: #43c181;

padding-top: 10px;

padding-left: 110px;

padding-bottom: 30px;

width: 500px;

height: auto;

}

</style>

<div class="box-header">Register From</div>

<label>Title</label>

<option value="">Select Title</option>

</select>

</div>

<label>First Name</label>

<input type="text" id="FirstName" name="FirstName" class="form-control"

placeholder="First Name"/>

</div>

<label>Mobile</label>

</div>

<label>Email</label>

</div>

<label>Password</label>

<input type="password" id="Password" name="Password" class="form-control"

placeholder="Password"/>

</div>

<label>Confirm Password</label>

<input type="password" id="ConfirmPassword" name="ConfirmPassword" class="form-control"

placeholder="ConfirmPassword"/>

</div>

<label>Gender</label>

<input type="radio" id="Gender" name="Gender" value="Male"> Male

<input type="radio" id="GenderNew" name="Gender" value="Female"> Female<br>

</div>

<input type="submit" value="Submit" class="btn btn-danger" id="Submit" name="Submit"

onclick="Register()">

</div>

</form>

</div>

</body>

Result

*Please share, comment and subscribe to PHP Javascript for more.

* Display JSON data in dropdown

* Display JSON data in a table

Making a popup is an exceptionally basic expansion to any site page. In this instructional exercise, I will demonstrate to you industry standards to make a popup utilizing essential HTML, Javascript and CSS. You can trigger popup on every time for example mouseover or keypress.

Here is the CSS code, place it in your head section of HTML code.

<!DOCTYPE html>
<html>

<head>
    <style>
        button {
            background-color: #ff7600; 
            border: none;
            color: black;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }

        body {
            margin: auto;
            width: 100%;
            padding: 10%;
        }

        .modal {
            display: none; 
            position: fixed; 
            z-index: 1; 
            padding-top: 10%;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        .modal-content {
            background-color: #00ffff;
            margin: auto;
            padding: 20px;
            width: 50%;
            height: 30%;
            box-shadow: 3px 5px #88888882;
        }

        .modal-text {
            padding: 80px;
            font-size: 22px;
        }

        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>

<body>


<button id="myBtn">Open Modal</button>


<div id="myModal" class="modal">


<div class="modal-content">
<span class="close">×</span>
<div class="modal-text">
<p>Hello World! Fallow PHPJavascript.com.</p>
</div>
</div>

</div>

<script>
var modal = document.getElementById('myModal');

var btn = document.getElementById("myBtn");

var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function () {
modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>

</body>
</html>
Result:

PHP JavaScript

Form Validation Using Jquery

Result

* Display JSON data in dropdown

* Display JSON data in a table

How To Create a Modal Popup Box with HTML, CSS and JavaScript ?

Labels

Popular Posts