How to create custom validation in jquery?

Define Custom Jquery Validation Method Example: for the custom validation with jquery and CSS, most important is the first need to value of the field, which field you want to validate then use to condition if value will be blank then show error, so need to insert error message with .insertAfter('selector') method. For the more description see below code example:


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Field validation</title>
    <style>
        body {
            margin0;
            padding0;
            font-familyArialHelveticasans-serif;
            font-size16px;
        }
        .conatiner {
            max-width600px;
            margin30px auto 50px;
            background#eee;
            padding50px;
            box-sizingborder-box;
            border1px solid #ccc;
            border-radius10px;
        }
        .form-group {
            margin-bottom25px;
            width100%;
            displayinline-block;
            positionrelative;
            margin-right30px;
        }
        .form-group label {
            displayblock;
            margin0 0 2px 0;
        }
        .form-group .form-control {
            border-top1px solid #999;
            border-bottom1px solid #ddd;
            border-left1px solid #999;
            border-right1px solid #ddd;
            padding4px 12px;
            height40px;
            width100%;
            displayinline-block;
            box-sizingborder-box;
            font-size16px;
            color#2d2d2d
        }
        .form-group .form-control:focus {
            outlinenone;
        }
        .validateBtn {
            background#0bf;
            color#fff;
            text-aligncenter;
            displayinline-block;
            font-size20px;
            border-radius4px;
            padding10px 20px;
            border0;
            cursorpointer;
            text-transformuppercase;
            transitionall 0.5s;
            margin-bottom30px;
        }
        .validateBtn:focus {
            outlinenone;
        }
        .validateBtn:hover {
            background#0b6;
            transitionall 0.5s;
        }
        .error {
            border1px solid #f00 !important;
        }
        [class^=tooltip] {
            positionabsolute;
            font-size13px;
            text-aligncenter;
            left0;
            color#f00;
            padding3px 0;
            font-familyArialHelveticasans-serif;
        }
        .text-center {
            text-aligncenter;
        }
    </style>
</head>

<body>
    <div class="conatiner">
        <div class="form-group">
            <label>First Name</label>
            <input type="text" class="form-control" name="fName" id="fName" />
        </div>
        <div class="form-group">
            <label>Last Name</label>
            <input type="text" class="form-control" name="lName" id="lName" required />
        </div>
        <div class="text-center">
            <button id="validate" class="validateBtn">Validate</button>
        </div>
        <div class="fullName">
            <div><span id="fresult"></span> <span id="lresult"></span> </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $.noConflict();
        jQuery(function () {

            jQuery('#validate').click(function () {
                var fName = jQuery('#fName').val();
                var lName = jQuery('#lName').val();

                if (fName != '') {
                    jQuery('#fName').removeClass('error');
                    jQuery('.tooltip1').remove();
                } else {
                    jQuery('#fName').addClass('error');
                    jQuery('<div class="tooltip1">Enter your full Name</div>').insertAfter('#fName');
                }

                if (lName != '') {
                    jQuery('#lName').removeClass('error');
                    jQuery('.tooltip2').remove();
                } else {
                    jQuery('#lName').addClass('error');
                    jQuery('<div class="tooltip2">Enter your last name</div>').insertAfter('#lName');
                }

                if (fName != '' && lName != '') {
                    jQuery('#fresult').html('Your full name is: <strong>' + fName + '</strong>');
                    jQuery('#lresult').html('<strong>' + lName + '</strong>');
                    jQuery("html,body").animate({ scrollTop: jQuery(".fullName").offset().top - 10 }, "slow");
                }

            });

        });
    </script>
</body>

</html>
 

Result will be as attached screenshot -

No comments:

Note: Only a member of this blog may post a comment.

Copyright Reserved to Anything Learn. Powered by Blogger.