JSFiddle - React, Tailwind, and code Playground

by محمد رستمیانی

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/guillaumepotier/Parsley.js/2.8.1/dist/parsley.js"></script>
<form action="test.php" id="form_register" method="post" data-parsley-validate="">
<label for="username">usename :</label>
<input type="text" name="username" id="username" class="form-control" autocomplete="username" requireddata-parsley-remote="register/ajax_username_exists/{value}" data-parsley-remote-reverse="true">
<label for="password">Password :</label>
<input type="password" name="password" id="password" class="form-control" autocomplete="new-password" required pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" >
<label for="repassword">Password again:</label>
<input type="password" name="repassword" id="repassword" class="form-control" required autocomplete="new-password" data-parsley-equalto="#password" >
<label for="first_name">First Name :</label>
<input type="text" name="first_name" id="first_name" class="form-control" autocomplete="name">
<label for="last_name">Last Name:</label>
<input type="text" name="last_name" id="last_name" class="form-control" autocomplete="family-name">
<label for="mobile_number">Mobile :</label>
<input type="text" name="mobile_number" id="mobile_number" class="form-control" autocomplete="mobile" pattern="^09\d{9}$" >
<label for="phone_number">Phone :</label>
<input type="text" name="phone_number" id="phone_number" class="form-control" autocomplete="tel" pattern="^\d{8,12}$" >
<label for="address">Address :</label>
<input type="text" name="address" id="address" class="form-control" autocomplete="street-address">
<label for="date_birth">Birth Date:</label>
<input type="text" name="date_birth" id="date_birth" class="form-control" autocomplete="bday" placeholder="0000-00-00" pattern="^\d{4}-\d{1,2}-\d{1,2}$"  value="1975-01-01">
<input type="submit" value="Register" class="btn btn-primary btn-submit">
</form>

JavaScript

$('#form_register .btn-submit').click(function(){
    $('#form_register').parsley().validate();
});