I need to make HTML5 validation rule so:
10 characters
mix of letters and numbers
at least 1 letter
I try something like:
<input maxlength="200" type="text" name="serial" id="serial" required="required" class="form-control input-lg" pattern="[a-fA-F]{1,}[0-9]{10}" title="Wrong Code" placeholder="Security Code" />
but don't work.
You could use <input type="password" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,10}$" required>
Or this (it's a bit longer...):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px
}
input[type=button] {
background-color: #4CAF50;
color: white
}
.container {
background-color: #f1f1f1;
padding: 20px
}
#message {
display: none;
position: relative;
margin-top: 10px
}
.valid {
display: none
}
</style>
</head>
<body>
<div class="container">
<form action="/db.php" id="form">
<label for="psw">Password</label>
<input type="password" id="psw" name="psw" required>
<input type="button" value="Submit" onclick="analyze()">
</form>
</div>
<div id="message">
<h3 id="theH3">Your password doesn't contain any of the following:</h3>
<p id="letter" class="invalid">A letter</p>
<p id="number" class="invalid">A number</p>
<p id="length" class="invalid">10 characters</p>
</div>
<script>
var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");
var tmp = 0;
myInput.onfocus = function () {
document.getElementById("message").style.display = "block";
}
myInput.onblur = function () {
document.getElementById("message").style.display = "none";
}
myInput.onkeyup = function () {
var lowerCaseLetters = /[a-zA-Z]/g;
if (myInput.value.match(lowerCaseLetters)) {
letter.classList.remove("invalid");
letter.classList.add("valid");
tmp++;
} else {
letter.classList.remove("valid");
letter.classList.add("invalid");
}
var numbers = /[0-9]/g;
if (myInput.value.match(numbers)) {
number.classList.remove("invalid");
number.classList.add("valid");
tmp++;
} else {
number.classList.remove("valid");
number.classList.add("invalid");
} if (myInput.value.length >= 10) {
length.classList.remove("invalid");
length.classList.add("valid");
tmp++;
} else {
length.classList.remove("valid");
length.classList.add("invalid");
}
}
function analyze() {
var lowerCaseLetters = /[a-zA-Z]/g;
var numbers = /[0-9]/g;
if (lowerCaseLetters.test(myInput.value) && numbers.test(myInput.value))document.getElementById('form').submit();
if(tmp==3){
var message = document.getElementById('theH3')
message.style('display:none;');
}
}
</script>
</body>
</html>
<input maxlength="200" type="text" name="serial" id="serial" required="required" class="form-control input-lg" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,10}$" title="Wrong Code" placeholder="Security Code" />
^[a-zA-Z][a-zA-Z0-9-_\.]{1,10}$
I think you are looking for this website.
URL : http://html5pattern.com/Names
Related
I write a login form but I can't make it correctly in validation with jQuery.
$(document).ready(function() {
$("#form1").validate({
rules: {
username: {
required: true,
minlength: 6
},
password: {
required: true,
minlength: 5
}
},
messages: {
username: {
required: "name is mandatory"
}
}
});
});
.error {
color: red;
}
p {
font-size: 13px;
font-style: arial;
font-align: left;
}
body {
font-family: calibri, arial, sans-serif;
background-color: powderblue;
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
span.password {
float: right;
padding-top: 50px;
}
.login-form {
margin-top: 5%;
margin-bottom: 5%;
position: relative;
width: 390px;
left: 35%;
height: 500px;
border: 6px solid#ff0000;
padding: 10px;
background-color: #00ffff;
}
.login-form h1 {
font-size: 50px;
text-align: center;
text-transform: uppercase;
margin: 40px;
}
.login-form label {
font-size: 29px;
text-align: right margin:45px;
}
.login-form input[type=text],
.login-form input[type=password] {
font-size: 20px;
width: 350px;
padding: 10px;
border: 0;
outline: none;
border-radius: 5px;
}
.login-form button {
font-size: 16px;
color: white;
background-color: green;
font-weight: bold;
padding: 79px;
width: 60%;
margin: 10px 15px;
padding: 8px 6px;
border: 5px;
cursor: pointer;
}
.login-form button:hover {
border: solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="jquery-validation/dist/jquery.validate.min.js">
</script>
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<div class="login-form">
<h1>LOGIN PAGE</h1>
<form action="#" name="form1" id="form1">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" placeholder="username"><br>
<br>
<label for="password">Password</label>
<input type="password" name="password" id="password" placeholder="pswd"><br>
<input name="submit" type="submit" id="submit" class="submit" value="Submit">
<span>
<input type="checkbox" id= "remember" name="remember " value="remember me">
<label for ="checkbox" name="checkbox" >Remember me</label>
</span>
<span class="password">Forget <a href="#" >Password ?</a></span>
</form>
</div>
For your use case, HTML5 validation attributes could be used to validate
In the HTML snippet below required, minlength, pattern and max validation attributes were used.
<form action="#" id="formOne" novalidate>
<div class="FormGroup">
<label for="name">Name</label>
<input
type="text"
class="FormGroup__Input"
name="username"
placeholder="username"
data-v-input
minlength="6"
required
/>
<span class="FormGroup__ErrorLabel"></span>
</div>
<div class="FormGroup">
<label for="password">Password</label>
<input
type="number"
name="password"
class="FormGroup__Input"
placeholder="password"
data-v-input
minlength="5"
required
/>
<span class="FormGroup__ErrorLabel"></span>
</div>
<button type="submit">Submit</button>
</form>
Steps to make this form work
put novalidate attribute on the form element to validate inputs using code (javascript).
Each input element should have a name attribute that should be unique to that input
Add data-v-input attribute to each input element you want to be considered for validation by the javascript.
Put your html5 validation rules on the input elements
To show errors, add an element just below the input element. NOTE: The error label should be the next sibling of the input field.
'use strict';
const formNode = document.querySelector("#formOne");
initValidation(formNode, (form, data) => {
alert(JSON.stringify(data, null, 4))
});
function initValidation(formNode, onSubmitHandler){
const validationErrors = [];
const inputs = formNode.querySelectorAll("[data-v-input]");
const selects = formNode.querySelectorAll("[data-v-select]");
formNode.addEventListener("submit", handleSubmit);
inputs.forEach(input => input.addEventListener("blur", handleBlur));
inputs.forEach(input => input.addEventListener("input", handleInput));
function handleSubmit(evt){
evt.preventDefault();
let formData = {};
if(inputs.length > 0){
inputs.forEach(input => {
validateInput(input);
formData[input.name] = input.value;
});
}
if(selects.length > 0){
selects.forEach(select => {
validateInput(select);
formData[select.name] = select.value;
});
}
if(validationErrors.length === 0){
formNode.reset();
onSubmitHandler(formNode, formData);
}
}
function handleBlur(evt){
validateInput(evt.target);
}
function handleInput(evt){
validateInput(evt.target);
}
function validateInput(inputNode){
if(inputNode.validity.valid){
let inputNodeIndex = validationErrors.indexOf(inputNode.name);
validationErrors.splice(inputNode, 1);
renderErrorLabel(inputNode, false);
} else {
validationErrors.push(inputNode.name);
renderErrorLabel(inputNode);
}
}
function renderErrorLabel(node, show = true){
node.nextElementSibling.textContent = show ? node.validationMessage : "";
}
return true;
}
Copy the initValidation function into your javascript file.
To validate your form, evoke initValidation after DOM loads. It takes two arguments.
a form node: a result of document.getElementById or any of the DOM selectors. However, initValidation takes one form node.
a callback that receives the form node as it's first argument and the form's data as the second argument. Whatever you want to do after validation is complete goes in the body of that callback. NOTE: The callback is only called when all validations were passed and there's no error.
I had made a html page through google app script in spreadsheet , all is working fine in pc mode but in mobile friendly its not responsive and after clicking particular field it displays blank black screen.
forms.html
<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<!---<title> Responsive Registration Form | CodingLab </title>--->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
height: 120vh;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
background: linear-gradient(135deg, #71b7e6, #9b59b6);
}
.container {
max-width: 700px;
width: 100%;
background-color: #fff;
padding: 25px 30px;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
.container .title {
font-size: 25px;
font-weight: 500;
position: relative;
}
.container .title::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 30px;
border-radius: 5px;
background: linear-gradient(135deg, #71b7e6, #9b59b6);
}
.content form .user-details {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px 0 12px 0;
}
form .user-details .input-box {
margin-bottom: 15px;
width: calc(100% / 2 - 20px);
}
form .input-box span.details {
display: block;
font-weight: 500;
margin-bottom: 5px;
}
.user-details .input-box input {
height: 45px;
width: 100%;
outline: none;
font-size: 16px;
border-radius: 5px;
padding-left: 15px;
border: 1px solid #ccc;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
.user-details .input-box select {
height: 45px;
width: 100%;
outline: none;
font-size: 16px;
border-radius: 5px;
padding-left: 15px;
border: 1px solid #ccc;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
.user-details .input-box input:focus,
.user-details .input-box input:valid {
border-color: #9b59b6;
}
form .gender-details .gender-title {
font-size: 20px;
font-weight: 500;
}
form .category {
display: flex;
width: 80%;
margin: 14px 0;
justify-content: space-between;
}
form .category label {
display: flex;
align-items: center;
cursor: pointer;
}
form .category label .dot {
height: 18px;
width: 18px;
border-radius: 50%;
margin-right: 10px;
background: #d9d9d9;
border: 5px solid transparent;
transition: all 0.3s ease;
}
#dot-1:checked~.category label .one,
#dot-2:checked~.category label .two,
#dot-3:checked~.category label .three {
background: #9b59b6;
border-color: #d9d9d9;
}
form input[type="radio"] {
display: none;
}
form .button {
height: 45px;
margin: 35px 0
}
form .button input {
height: 100%;
width: 100%;
border-radius: 5px;
border: none;
color: #fff;
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(135deg, #71b7e6, #9b59b6);
}
form .button input:hover {
/* transform: scale(0.99); */
background: linear-gradient(-135deg, #71b7e6, #9b59b6);
}
#media(max-width: 584px) {
.container {
max-width: 100%;
}
form .user-details .input-box {
margin-bottom: 15px;
width: 100%;
}
form .category {
width: 100%;
}
.content form .user-details {
max-height: 300px;
overflow-y: scroll;
}
.user-details::-webkit-scrollbar {
width: 5px;
}
}
#media(max-width: 459px) {
.container .content .category {
flex-direction: column;
}
}
</style>
<script>
var stateObject = {
"Human Resource": {
"Zoopero Marketing Limited": [],
},
"Digital Marketing": {
"Zoopero Marketing Limited": [],
},
"Businees Dev Executive": {
"Analytics Valley technologies": [],
"Material Library India": [],
"Purple Apple Infosystems": [],
"Find My Hospital": [],
"Edurific": [],
},
"Market Researcher": {
"Acadspace technologies": [],
},
"Mern Stack": {
"Jackfruit": [],
},
"Social Media Manager": {
"Trinano Technologies": [],
},
"PHP & Laravel": {
"Analytics Valley technologies": [],
},
"React JS Developer": {
"Analytics Valley technologies": [],
}
}
window.onload = function () {
var domain = document.getElementById("domain"),
company = document.getElementById("company"),
districtSel = document.getElementById("districtSel");
for (var country in stateObject) {
domain.options[domain.options.length] = new Option(country, country);
}
domain.onchange = function () {
company.length = 1; // remove all options bar first
districtSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
for (var state in stateObject[this.value]) {
company.options[company.options.length] = new Option(state, state);
}
}
domain.onchange(); // reset in case page is reloaded
company.onchange = function () {
districtSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
var district = stateObject[domain.value][this.value];
for (var i = 0; i < district.length; i++) {
districtSel.options[districtSel.options.length] = new Option(district[i], district[i]);
}
}
}
</script>
</head>
<body>
<div class="container">
<div class="title">Registration</div>
<div class="content">
<form action="" class="main" id="form" novalidate="novalidate">
<div class="user-details">
<div class="input-box">
<span class="details">Full Name</span>
<input id="name" type="text" name="Name" class="validate" required="" aria-required="true"
placeholder="Enter your name" required>
</div>
<div class="input-box">
<span class="details">Whatsapp Number</span>
<input type="number" name="whatsapp" id="whatsapp" class="validate" required=""
aria-required="true" placeholder="Enter Your number">
</div>
<div class="input-box">
<span class="details">Email</span>
<input type="email" name="email" id="email" class="validate" required="" aria-required="true"
placeholder="Enter your email" required>
</div>
<div class="input-box">
<span class="details">Select Year</span>
<select id="year" name="year" required>
<option value="" selected disabled>Year</option>
<option value="1st Year">1st Year</option>
<option value="2nd Year">2nd Year</option>
<option value="3rd Year">3rd Year</option>
<option value="4th Year">4th Year</option>
</select>
</div>
<div class="input-box">
<span class="details">Gender</span>
<select id="gender" name="gender" required>
<option value="" selected disabled>Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Prefer Not To Say">Prefer Not To Say</option>
</select>
</div>
<div class="input-box">
<span class="details">Prefered Domain</span>
<select id="domain" name="domain" required>
<option value="" disabled selected>Select Domain</option>
</select>
</div>
<div class="input-box">
<span class="details">Prefered Company</span>
<select id="company" name="company" required>
<option value="" disabled selected>Select Company</option>
</select>
<select name="district" id="districtSel" size="1" style="display: none;">
<option value="" selected="selected">Please select State first</option>
</select><br>
</div>
<div class="input-box">
<span class="details">Select College</span>
<select id="college" name="college" required>
<option value="" selected disabled>College</option>
<option value="Bharati Vidyapeeth College Of Engineering Pune">Bharati Vidyapeeth College Of Engineering Pune</option>
<option value="Others">Others</option>
</select>
</div>
<div class="input-box">
<span class="details">Upload Resume</span>
<input type="file" id="files" placeholder="Upload your resume" required
accept=".doc,.docx,.pdf">
</div>
<div class="input-box">
<span class="details">College Name</span>
<input id="college-name" type="text" name="college-name" class="validate" required="" aria-required="true"
placeholder="If Others Enter College Name" required>
</div>
<div class="input-box">
<span class="details">Unique ID</span>
<input id="unqID" type="number" name="unqID" class="validate" required="" aria-required="true"
placeholder="Enter your Unique ID" required>
</div>
<div class="input-box">
<span class="details">Alternate Mobile</span>
<input id="tel" type="tel" name="tel" class="validate" required="" aria-required="true"
placeholder="Enter your number" required>
</div>
</div>
<div class="input-box">
<div id="progress">
</div>
</div>
<div class="button">
<input type="submit" value="Register" onclick="submitForm(); return false;">
</div>
<div id="success" style="display:none">
<h5 class="left-align teal-text">File Uploaded</h5>
<p>Your file has been successfully uploaded.</p>
</div>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materializ e.min.js"></script>
<script>
var file, reader = new FileReader();
reader.onloadend = function (e) {
if (e.target.error != null) {
showError("File " + file.name + " could not be read.");
return;
} else {
google.script.run
.withSuccessHandler(showSuccess)
.uploadFileToGoogleDrive(e.target.result, file.name, $('input#name').val(), $('input#whatsapp').val(), $('select#year').val(), $('input#email').val(), $('select#gender').val(), $('select#college').val(), $('input#college-name').val(), $('select#domain').val(), $('select#company').val(), $('input#tel').val(), $('input#unqID').val());
}
};
function showSuccess(e) {
if (e === "OK") {
$('#forminner').hide(); $('#success').show();
} else {
showError(e);
}
}
function restartForm() {
$('#form').trigger("reset"); $('#forminner').show(); $('#success').hide(); $('#progress').html("");
}
function submitForm() {
var files = $('#files')[0].files;
if (files.length === 0) {
showError("Please select a file to upload");
return;
}
file = files[0];
if (file.size > 1024 * 1024 * 5) {
showError("The file size should be < 5 MB. ");
return;
}
showMessage("Uploading file ...");
reader.readAsDataURL(file);
}
function showError(e) {
$('#progress').addClass('red-text').html(e);
}
function showMessage(e) {
$('#progress').removeClass('red-text').html(e);
}
$(document).ready(function () {
$('select').material_select();
});
</script>
</body>
</html>
code.gs
// 1. Enter sheet name where data is to be written below
var SHEET_NAME = "Sheet1";
// 2. Run > setup
//
// 3. Publish > Deploy as web app
// - enter Project Version name and click 'Save New Version'
// - set security level and enable service (most likely execute as 'me' and access 'anyone, even anonymously)
//
// 4. Copy the 'Current web app URL' and post this in your form/script action
//
// 5. Insert column names on your destination sheet matching the
//parameter names of the data you are passing in (exactly matching case)
var SCRIPT_PROP = PropertiesService.getScriptProperties(); // new
//property service
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('forms.html').setTitle("SIPP Registrations");
// return HtmlService.createHtmlOutputFromFile('forms.html').setFaviconUrl("");
}
function uploadFileToGoogleDrive(data, file, name, whatsapp, year, email, gender, college, college_name, domain, company, tel, unqID) {
try {
var dropbox = "Received Files";
//var folder, folders = DriveApp.getFoldersByName(dropbox);
var folder=DriveApp.getFolderById('1H_52_xxh1rrzSjZyVrHl4pawMtLpeFqE');
/*
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
*/
/* Credit: www.labnol.org/awesome */
var contentType = data.substring(5,data.indexOf(';')), bytes = Utilities.base64Decode(data.substr(data.indexOf('base64,')+7)), blob = Utilities.newBlob(bytes, contentType, file),
file = folder.createFolder([name, email].join(" ")).createFile(blob),
filelink=file.getUrl() ;
var lock = LockService.getPublicLock();
lock.waitLock(30000); // wait 30 seconds before conceding defeat.
// next set where we write the data - you could write to multiple/alternate destinations
var doc = SpreadsheetApp.openById("1Z4mvlfJpStn6tYyq35HeLGJCKbVRikJyqs5M9pZJgt0");
var sheet = doc.getSheetByName(SHEET_NAME);
// we'll assume header is in row 1 but you can override with
//header_row in GET/POST data
var headRow = 1;
var headers = sheet.getRange(1, 1, 1,
sheet.getLastColumn()).getValues()[0];
var nextRow = sheet.getLastRow()+1; // get next row
var row = [];
// loop through the header columns
for (i in headers){
if (headers[i] == "Timestamp"){ // special case if you include a'Timestamp' column
row.push(new Date());
} else if (headers[i] == "name"){
row.push(name);
} else if (headers[i] == "whatsapp"){
row.push(whatsapp);
} else if (headers[i] == "year"){
row.push(year);
} else if (headers[i] == "email"){
row.push(email);
} else if (headers[i] == "gender"){
row.push(gender);
} else if (headers[i] == "college"){
row.push(college);
} else if (headers[i] == "college_name"){
row.push(college_name);
} else if (headers[i] == "domain"){
row.push(domain);
} else if (headers[i] == "company"){
row.push(company);
} else if (headers[i] == "tel"){
row.push(tel);
} else if (headers[i] == "unqID"){
row.push(unqID);
} else if (headers[i] == "filelink"){
row.push(filelink);
}
}
// more efficient to set values as [][] array than individually
sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
// return json success results
//return ContentService
// .createTextOutput(JSON.stringify({"result":"success", "row": nextRow}))
// .setMimeType(ContentService.MimeType.JSON);
return "OK";
} catch (f) {
return f.toString();
} finally { //release lock
lock.releaseLock();
}
}
function setup() {
var doc = SpreadsheetApp.getActiveSpreadsheet(); SCRIPT_PROP.setProperty("1Z4mvlfJpStn6tYyq35HeLGJCKbVRikJyqs5M9pZJgt0", doc.getId());
}
What is the issue?
Error in mobile devices
My html page div element is getting changed when I restore down the browser but works fine when I maximize it.
when I click on the password field there is a pop-up window displayed to validate the password complexity and every time it will be displayed next to the password field in full screen mode but it will overlap when I click on password field in restore down mode.
I want that to be showed next to the password field in restore down mode also as how it works in full screen mode.
please help
Please find below the HTML and CSS code attached.
var check = function() {
if (document.getElementById('psw').value ==
document.getElementById('confirmPassword').value) {
document.getElementById('info').style.color = 'green';
document.getElementById('info').innerHTML = 'Matching';
} else {
document.getElementById('info').style.color = 'red';
document.getElementById('info').innerHTML = 'Not Matching';
}
}
function myFunction() {
var x = document.getElementById("psw"), y = document.getElementById("confirmPassword");
if (x.type === "password") {
x.type = "text";
y.type = "text";
} else {
x.type = "password";
y.type = "password";
}
}
var psw = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");
var symbol = document.getElementById("symbol");
// When the user clicks on the password field, show the message box
psw.onfocus = function() {
document.getElementById("message").style.display = "block";
}
// When the user clicks outside of the password field, hide the message box
psw.onblur = function() {
document.getElementById("message").style.display = "none";
}
// When the user starts to type something inside the password field
psw.onkeyup = function() {
// Validate lowercase letters
var lowerCaseLetters = /[a-z]/g;
if(psw.value.match(lowerCaseLetters)) {
letter.classList.remove("invalid");
letter.classList.add("valid");
} else {
letter.classList.remove("valid");
letter.classList.add("invalid");
}
// Validate capital letters
var upperCaseLetters = /[A-Z]/g;
if(psw.value.match(upperCaseLetters)) {
capital.classList.remove("invalid");
capital.classList.add("valid");
} else {
capital.classList.remove("valid");
capital.classList.add("invalid");
}
// Validate numbers
var numbers = /[0-9]/g;
if(psw.value.match(numbers)) {
number.classList.remove("invalid");
number.classList.add("valid");
} else {
number.classList.remove("valid");
number.classList.add("invalid");
}
// Validate length
if(psw.value.length >= 8) {
length.classList.remove("invalid");
length.classList.add("valid");
} else {
length.classList.remove("valid");
length.classList.add("invalid");
}
// Validate Symbols
var symbols = /[-!$%^&*()_+|~=`{}[:;<>?,.##\]]/g;
if(psw.value.match(symbols)) {
symbol.classList.remove("invalid");
symbol.classList.add("valid");
} else {
symbol.classList.remove("valid");
symbol.classList.add("invalid");
}
}
/* Style all input fields */
input {
width: 25%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 8px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 6px;
}
#myForm select
{
width: 25%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 8px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
}
/* Style the submit button */
input[type=submit] {
background-color: #4CAF50;
color: white;
}
/* Style the container for inputs */
.container {
background-color: #f1f1f1;
padding: 20px;
}
/* The message box is shown when the user clicks on the password field */
#message {
display:none;
float: left;
background: transparent;
color: #000;
position: absolute;
right: 0;
padding: -2000px;
margin-top: -120px;
margin-right: 200px;
}
#message p {
padding: 1px 35px;
font-size: 14px;
}
/* Add a green text color and a checkmark when the requirements are right */
.valid {
color: green;
}
.valid:before {
position: relative;
left: -35px;
content: "✔";
}
/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
color: red;
}
.invalid:before {
position: relative;
left: -35px;
content: "?";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body bgcolor="#dbddea">
<h2 align="center"><u>Password Change</u></h2>
<p align="center"><marquee><h3>Change the password for unix users.</h3></marquee></p>
<div class="container">
<form>
<div id=myForm align = "center">
<label for="usrname">Select Username</label><br>
<select name="Users">
<option value="test1">test1</option>
<option value="test2">test2</option>
</select>
</div>
<div align= "center">
<input type="password" id="psw" name="psw" onkeyup='check();' placeholder="New Password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!##$%^&*_=+-]).{8,}" title="Must contain at least one number, one symbol and one uppercase and lowercase letter, and at least 8 or more characters" required>
<br>
<div id="message" align = "left">
<h4>Password must contain the following:</h4>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
<p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
<p id="number" class="invalid">A <b>number</b></p>
<p id="length" class="invalid">Minimum <b>8 characters</b></p>
<p id="symbol" class="invalid">A <b>symbol</b></p>
</div>
<input type="password" id="confirmPassword" name="confirmPassword" onkeyup='check();' placeholder="Re-type Password" title="Confirm new password" required>
<br>
<span id='info'></span>
<input type="checkbox" onclick="myFunction()" style="width: 40px;">Show Password
</div>
<div align = "center">
<input type="submit" id="submit" value="Change Password">
</div>
</form>
</div>
</body>
</html>
Plz add this code..
css
#media only screen and (max-width: 1280px) {
#message {
position: relative;
float: none;
margin: 0;
width: 25%;
}
}
Plz modify your css code..
css
#message {
display:none;
width: 25%;
}
HTML
<div class="container">
<form>
<div id=myForm align = "center">
<label for="usrname">Select Username</label><br>
<select name="Users">
<option value="test1">test1</option>
<option value="test2">test2</option>
</select>
</div>
<div align= "center">
<input type="password" id="psw" name="psw" onkeyup='check();' placeholder="New Password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!##$%^&*_=+-]).{8,}" title="Must contain at least one number, one symbol and one uppercase and lowercase letter, and at least 8 or more characters" required>
<br>
<input type="password" id="confirmPassword" name="confirmPassword" onkeyup='check();' placeholder="Re-type Password" title="Confirm new password" required>
<br>
<div id="message" align = "left">
<h4>Password must contain the following:</h4>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
<p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
<p id="number" class="invalid">A <b>number</b></p>
<p id="length" class="invalid">Minimum <b>8 characters</b></p>
<p id="symbol" class="invalid">A <b>symbol</b></p>
</div>
<span id='info'></span>
<input type="checkbox" onclick="myFunction()" style="width: 40px;">Show Password
</div>
<div align = "center">
<input type="submit" id="submit" value="Change Password">
</div>
</form>
</div>
Here are some changes to make it simple.
#message {
display:none;
float: left;
background: transparent;
color: #000;
position: absolute;
right: 0;
padding: -2000px;
margin-top: -120px;
margin-right: 200px;
}
Replace with below CSS
#message {
width: 25%;
}
Make changes in js code as below
psw.onfocus = function() {
document.getElementById("message").style.display = "block";
}
// When the user clicks outside of the password field, hide the message box
psw.onblur = function() {
document.getElementById("message").style.display = "none";
}
Change to
psw.onfocus = function() {
$('#message').slideDown();
}
// When the user clicks outside of the password field, hide the message box
psw.onblur = function() {
$('#message').slideUp();
}
Is there any css property which can be used to highlight all the filled fields? Just like we have, on focus css properties.
input[type="text"] {
background-color: white;
}
input[type="text"]:focus {
background-color: red;
}
<input type="text">
I want to make the field background-color green when there is something in the field. Is this possible through CSS? If not CSS, is there any other way?
Certainly you can achieve this with javascript.
The script below will listen for a keyup after the focus has shifted to any one of the <input> fields.
It will then check to see if the respective <input> field is empty.
If it is not, it will change the background of the <input> field to green.
var inputs = document.querySelectorAll('input[type="text"]');
function detectContent() {
if (this.value !== '') {
this.style.backgroundColor = 'green';
this.style.color = 'white';
} else {
this.style.backgroundColor = 'white';
this.style.color = 'black';
}
}
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.addEventListener('keyup', detectContent, false);
}
<input type="text" />
<input type="text" />
<input type="text" />
Try this...
$(document).ready(function() {
$(':input').on('input', function() {
if (this.value.length > 0) {
$(this).css('background-color', 'green');
} else {
$(this).css('background-color', '');
}
});
});
input[type="text"] {
background-color: white;
color: #fff;
}
input[type="text"]:focus {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
I have a registration form which is designed in JQuery & i have a .php file where data insert query is written. But when i click on the submit button of the form .php file does not call. I already mentioned that formaction="insert.php". While i already store the folder in the htdocs folder.
Form.html
<!DOCTYPE html>
<html style=" border-bottom-right-radius: 258px; border-bottom-left-radius: 258px; border-top-left-radius: 258px; border-top-right-radius: 258px; ">
<head>
<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../dist/jquery.validate.js" type="text/javascript"></script>
<link href="../css/ui-lightness/jquery-ui-1.10.4.css" rel="stylesheet">
<script src="../js/jquery-ui-1.10.4.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript">
$(document).ready(function() {
$("#form").validate({
messages:
{
ProjectName: {
required: 'Please Enter Project Name'
},
location: {
required: 'Please Enter Location'
},
arch: {
required: 'Please Enter Architect Name'
},
projectno: {
required: 'Please Enter Project No.'
},
dof: {
required: 'Please Select Date'
},
dorder: {
required: 'Please select Order No.'
},
email:{
required: 'Please write EmailID'
}
}
});
$( "#datepicker" ).datepicker();
$("input").focus(function(){
$(this).css("background-color","#F7D9BA");
});
$("input").blur(function(){
$(this).css("background-color","#B8860B");
});
$( "input[type=submit], a, button" )
.button()
.click(function( event ) {
event.Default();
});
$( "input[type=reset], a, button" )
.button()
.click(function( event ) {
event.Default();
});
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
<style>
body
{
background-color: #CC6600;
}
span
{
color:red;
}
.error
{
font-size: 12px;
color: #A72727;
}
label
{
display: inline-block; width: 15em;
}
fieldset div
{
margin-bottom: 1em;
}
fieldset .help
{
display: inline-block;
}
.ui-tooltip
{
width: 210px;
}
input
{
background-color: white;
background: white url("../test/inputbox.jpg") repeat-x left top;
border: 0px solid #ccc;
padding: 0px 2px;
height: 25px;
font: 80% "Trebuchet MS", Trebuchet, Tahoma, Verdana, Arial, sans-serif;
}
</style>
</head>
<body>
<h1 style="margin-left: 0px; color:white; margin-left: 600px; "><b><u>Form:</u></b></h1>
<form id="form">
<fieldset style=" border-color: ghostwhite; border-width: 12px; margin-top: 42px;; background-color:gray;">
<legend style=" text-align: center; color:white;">Enter Details</legend>
<p>
<label style=" margin-left: 476px; color: whiteSmoke;" >Project:<span>*</span></label>
<input name="ProjectName" data-rule-required="true"/>
</p>
<p>
<label style=" margin-left: 476px; color: whiteSmoke;">Location:<span>*</span> </label>
<input id="location" name="location" data-rule-required="true" />
</p>
<p>
<label style=" margin-left: 476px; color: whiteSmoke;">Architect:<span>*</span></label>
<input name="arch" data-rule-required="true"/>
</p>
<p>
<label style=" margin-left: 476px; color: whiteSmoke;">Project No.:<span>*</span> </label>
<input id="projectno" name="projectno" data-rule-required="true" />
</p>
<p>
<label style=" margin-left: 476px; color: whiteSmoke;">Date:<span>*</span></label>
<input type="text" id="datepicker" name="dof" data-rule-required="true" />
</p>
<p>
<label style=" margin-left: 476px; color: whiteSmoke;">Recent Work:</label>
<input id="check" type="checkbox" name="check" data-rule-required="fasle" />
</p>
<p>
<label style=" margin-left: 476px; color: whiteSmoke;">Display Order:<span>*</span></label>
<select id="dorder" name="dorder" data-rule-required="true" style=" height: 22px; width: 38px; ">
<option ></option>
<option >1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</p>
<p>
<label style=" margin-left: 476px; color: whiteSmoke;">Email:<span>*</span></label>
<input id="email" name="email" data-rule-required="true"/>
</p>
<br>
<p>
<input style="margin-left:580px; padding-top: 2px;" class="submit" type="submit" value="Submit"/>
<input style="margin-left:20px; padding-top: 2px;" type="reset" value="Reset" name="Reset" />
</p>
</fieldset>
</form>
</body>
</html>
insert.php
<!DOCTYPE html>
<html>
<body>
<?php
$con=mysqli_connect("localhost","root","","NProject");
$rec_limit = 3;
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
// escape variables for security
$Project = mysqli_real_escape_string($con, $_POST['ProjectNo']);
$Location = mysqli_real_escape_string($con, $_POST['Location']);
$Architect = mysqli_real_escape_string($con, $_POST['Architect']);
$ProjectNo = mysqli_real_escape_string($con, $_POST['ProjectNo']);
$Date = mysqli_real_escape_string($con, $_POST['Date']);
$RecentWork = mysqli_real_escape_string($con, $_POST['RecentWork']);
$DisplayOrder = mysqli_real_escape_string($con, $_POST['DisplayOrder']);
$EmailID = mysqli_real_escape_string($con, $_POST['EmailID']);
$sql="INSERT INTO projecttb (Project, Location, Architect, ProjectNo, Date, RecentWork, DisplayOrder, EmailID)
VALUES ('$Project', '$Location', '$Architect','$ProjectNo','$Date','$RecentWork','$DisplayOrder','$EmailID')";
if (!mysqli_query($con,$sql)) {
die('Error: ' . mysqli_error($con));
}
echo "1 record added";
mysqli_close($con);
?>
</body>
</html>
you need to add this code to your form
<form id="form" method="post" action="insert.php">
This will call the PHP file