Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html>
- <head>
- <title>Register form</title>
- <meta charset="utf8">
- <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
- <style>
- body {
- font-family: 'Roboto Condensed', sans-serif;
- }
- .form-group {
- display: block;
- margin-bottom: 10px;
- }
- label {
- display: inline-block;
- width: 30%;
- font-family: 'Roboto Condensed', sans-serif;
- }
- input {
- width: 60%;
- font-family: 'Roboto Condensed', sans-serif;
- }
- input[type="text"], input[type="password"], input[type="email"] {
- border: 1px solid #000;
- height: 25px;
- background: #f2f2f2;
- box-shadow: 0px 0px 2px #897855;
- }
- input[type="submit"] {
- background: #4286f4;
- color: #dfdfdf;
- border: 0;
- display: block;
- width: 200px;
- height: 30px;
- font-weight: bold;
- font-size: 15px;
- }
- .required, .red {
- color: red;
- }
- .green {
- color: green;
- }
- .hidden {
- display: none;
- }
- </style>
- <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
- <script type="text/javascript">
- jQuery(document).ready(function() {
- jQuery("#username").change(function() {
- var username_length = jQuery("#username").val().length;
- if(username_length<3 || username_length>30) {
- jQuery("#username").css("borderColor", "red");
- if(jQuery("#username-error").is(":visible")==false) {
- jQuery("#username-error").toggle();
- }
- if(jQuery("#username-ok").is(":visible")==true) {
- jQuery("#username-ok").toggle();
- }
- jQuery("#submit").prop("disabled", true);
- } else {
- jQuery("#username").css("borderColor", "green");
- if(jQuery("#username-error").is(":visible")==true) {
- jQuery("#username-error").toggle();
- }
- if(jQuery("#username-ok").is(":visible")==false) {
- jQuery("#username-ok").toggle();
- }
- jQuery("#submit").prop("disabled", false);
- }
- });
- jQuery("#register-form").submit(function(e) {
- var password = jQuery("#password").val();
- var confirm_password = jQuery("#confirm_password").val();
- if(password!=confirm_password) {
- jQuery("#password").css("borderColor", "red");
- jQuery("#confirm_password").css("borderColor", "red");
- if(jQuery("#password-mismatch-error").is(":visible")==false) {
- jQuery("#password-mismatch-error").toggle();
- }
- e.preventDefault();
- }
- });
- });
- </script>
- </head>
- <body>
- <p>Join our website</p>
- <form action="register.php" method="post" id="register-form">
- <div class="form-group">
- <label for="username">Username <span class="required">*</span></label>
- <input id="username" type="text" name="username" required>
- <p id="username-error" style="display: none;" class="red"><strong>ГРЕШКА</strong>: Въведеното потребителско име НЕ Е коректно. Моля въведете потребителско име от 3 до 30 знака.</p>
- <p id="username-ok" style="display: none;" class="green">OK</p>
- </div>
- <div class="form-group">
- <label for="password">Password <span class="required">*</span></label>
- <input id="password" type="password" name="password" required>
- </div>
- <div class="form-group">
- <label for="confirm_password">Confirm Password <span class="required">*</span></label>
- <input id="confirm_password" type="password" name="confirm_password" required>
- <p id="password-mismatch-error" style="display: none;" class="red"><strong>ГРЕШКА</strong>: Паролите не съвпадат!.</p>
- </div>
- <div class="form-group">
- <label for="email">Your email <span class="required">*</span></label>
- <input id="email" type="email" name="email" required>
- </div>
- <div class="form-group">
- <input id="submit" type="submit" name="send" value="zdr server" disabled="false">
- </div>
- </form>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement