<!DOCTYPE html> <html> <head> <title>JQuery-validation demo | Semantic UI</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.1.4/semantic.min.css" /> <script type="text/javascript" src="../../lib/jquery-1.11.1.js"></script> <script type="text/javascript" src="../../dist/jquery.validate.js"></script> <style type="text/css"> .row { padding-bottom: 0px !important; } </style> </head> <body> <div class="ui grid sem"> <div class="four wide column"></div> <div class="eight wide column"> <div class="ui info message" style="top: 15px;"> <div class="header"> This demo shows how to integrate JQuery-validation and the Semantic UI framework. </div> <ul class="list"> <li><a href="https://semantic-ui.com/">Semantic UI home project</a></li> </ul> </div> <div class="ui segments" style="top: 20px; margin-bottom: 20px"> <div class="ui segment"> <h4 class="ui header">JQuery-validation demo - Semantic-UI Form</h4> </div> <div class="ui secondary segment"> <form id="signupForm" class="ui grid form" style="padding: 10px"> <div class="row field"> <label class="six wide column" for="firstname">First name</label> <div class="eight wide column"> <div class="ui input"> <input id="firstname" name="firstname" type="text" placeholder="First name" /> </div> </div> </div> <div class="row field"> <label class="six wide column" for="lastname">Last name</label> <div class="eight wide column"> <div class="ui input"> <input id="lastname" name="lastname" type="text" placeholder="Last name" /> </div> </div> </div> <div class="row field"> <label class="six wide column" for="username">Username</label> <div class="eight wide column"> <div class="ui input"> <input id="username" name="username" type="text" placeholder="Username" /> </div> </div> </div> <div class="row field"> <label class="six wide column" for="email">Email</label> <div class="eight wide column"> <div class="ui input"> <input id="email" name="email" type="text" placeholder="Email" /> </div> </div> </div> <div class="row field"> <label class="six wide column" for="password">Password</label> <div class="eight wide column"> <div class="ui input"> <input id="password" name="password" type="password" placeholder="Password" /> </div> </div> </div> <div class="row field"> <label class="six wide column" for="confirm_password">Confirm password</label> <div class="eight wide column"> <div class="ui input"> <input id="confirm_password" name="confirm_password" type="password" placeholder="Confirm password" /> </div> </div> </div> <div class="row field"> <label class="six wide column"></label> <div class="eight wide column"> <div class="ui checkbox"> <input name="agree" type="checkbox" /> <label>Please agree to our policy</label> </div> </div> </div> <div class="row"> <label class="six wide column"></label> <div class="eight wide column"> <button type="submit" class="ui primary button">Sign up</button> </div> </div> </form> </div> </div> </div> <div class="four wide column"></div> </div> <script type="text/javascript"> $.validator.setDefaults( { submitHandler: function () { alert( "submitted!" ); } } ); $( document ).ready( function () { $( "#signupForm" ).validate( { rules: { firstname: "required", lastname: "required", username: { required: true, minlength: 2 }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" }, email: { required: true, email: true }, agree: "required" }, messages: { firstname: "Please enter your firstname", lastname: "Please enter your lastname", username: { required: "Please enter a username", minlength: "Your username must consist of at least 2 characters" }, password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long" }, confirm_password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long", equalTo: "Please enter the same password as above" }, email: "Please enter a valid email address", agree: "Please accept our policy" }, errorPlacement: function ( error, element ) { error.addClass( "ui red pointing label transition" ); error.insertAfter( element.parent() ); }, highlight: function ( element, errorClass, validClass ) { $( element ).parents( ".row" ).addClass( errorClass ); }, unhighlight: function (element, errorClass, validClass) { $( element ).parents( ".row" ).removeClass( errorClass ); } } ); } ); </script> </body> </html>