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
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 am new to Blazor and trying to set up an address form to use google place autocomplete. I have done this web and mobile before.
I am not sure how to:
Call the javascript from the blazor component.
Populate the address fields from the selected address.
Save the data in the fields to the backend.
I was able to get working with the code below. For the complete solution see github repo. Here is the demo site.
\Shared\_Host.cshmtl
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEYI&libraries=places"></script>
</head>
\wwwroot\js\serverSideScripts.js
window.initAutocomplete = () => {
let autocomplete;
let address1Field;
let address2Field;
let postalField;
fillInAddress = (autocomplete) => {
// Get the place details from the autocomplete object.
const place = autocomplete.getPlace();
let address1 = "";
let postcode = "";
// Get each component of the address from the place details,
// and then fill-in the corresponding field on the form.
// place.address_components are google.maps.GeocoderAddressComponent objects
// which are documented at http://goo.gle/3l5i5Mr
if (place) {
for (const component of place.address_components) {
const componentType = component.types[0];
switch (componentType) {
case "street_number": {
address1 = `${component.long_name} ${address1}`;
break;
}
case "route": {
address1 += component.short_name;
break;
}
case "postal_code": {
postcode = `${component.long_name}${postcode}`;
break;
}
case "postal_code_suffix": {
postcode = `${postcode}-${component.long_name}`;
break;
}
case "locality":
document.querySelector("#locality").value = component.long_name;
break;
case "administrative_area_level_1": {
document.querySelector("#state").value = component.short_name;
break;
}
case "country":
document.querySelector("#country").value = component.long_name;
break;
}
}
address1Field.value = address1;
postalField.value = postcode;
// After filling the form with address components from the Autocomplete
// prediction, set cursor focus on the second address line to encourage
// entry of subpremise information such as apartment, unit, or floor number.
address2Field.focus();
}
}
address1Field = document.querySelector("#ship-address");
address2Field = document.querySelector("#address2");
postalField = document.querySelector("#postcode");
// Create the autocomplete object, restricting the search predictions to
// addresses in the US and Canada.
autocomplete = new google.maps.places.Autocomplete(address1Field, {
componentRestrictions: { country: ["us", "ca"] },
fields: ["address_components", "geometry"],
types: ["address"],
});
address1Field.focus();
// When the user selects an address from the drop-down, populate the
// address fields in the form.
autocomplete.addListener("place_changed", function () { fillInAddress(autocomplete) });
}
\Pages\GoogleAutoComplete.razor
#page "/AddressAutocompleteForm"
#inject IJSRuntime JSRuntime
<title>Place Autocomplete Address Form</title>
<style type="text/css">
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: "Roboto", sans-serif;
font-size: 18px;
color: #686868;
}
form {
display: flex;
flex-wrap: wrap;
align-items: center;
max-width: 400px;
padding: 20px;
}
input {
width: 100%;
height: 1.2rem;
margin-top: 0;
padding: 0.5em;
border: 0;
border-bottom: 2px solid gray;
font-family: "Roboto", sans-serif;
font-size: 18px;
}
input:focus {
border-bottom: 4px solid black;
}
input[type="reset"] {
width: auto;
height: auto;
border-bottom: 0;
background-color: transparent;
color: #686868;
font-size: 14px;
}
.title {
width: 100%;
margin-block-end: 0;
font-weight: 500;
}
.note {
width: 100%;
margin-block-start: 0;
font-size: 12px;
}
.form-label {
width: 100%;
padding: 0.5em;
}
.full-field {
flex: 400px;
margin: 15px 0;
}
.slim-field-left {
flex: 1 150px;
margin: 15px 15px 15px 0px;
}
.slim-field-right {
flex: 1 150px;
margin: 15px 0px 15px 15px;
}
.my-button {
background-color: #000;
border-radius: 6px;
color: #fff;
margin: 10px;
padding: 6px 24px;
text-decoration: none;
}
.my-button:hover {
background-color: #666;
}
.my-button:active {
position: relative;
top: 1px;
}
</style>
<!-- Note: The address components in this sample are based on North American address format. You might need to adjust them for the locations relevant to your app. For more information, see
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
-->
<form id="address-form" action="" method="get" autocomplete="off">
<p class="title">Sample address form for North America</p>
<p class="note"><em>* = required field</em></p>
<label class="full-field">
<!-- Avoid the word "address" in id, name, or label text to avoid browser autofill from conflicting with Place Autocomplete. Star or comment bug https://crbug.com/587466 to request Chromium to honor autocomplete="off" attribute. -->
<span class="form-label">Deliver to*</span>
<input id="ship-address"
name="ship-address"
required
autocomplete="off" />
</label>
<label class="full-field">
<span class="form-label">Apartment, unit, suite, or floor #</span>
<input id="address2" name="address2" />
</label>
<label class="full-field">
<span class="form-label">City*</span>
<input id="locality" name="locality" required />
</label>
<label class="slim-field-left">
<span class="form-label">State/Province*</span>
<input id="state" name="state" required />
</label>
<label class="slim-field-right" for="postal_code">
<span class="form-label">Postal code*</span>
<input id="postcode" name="postcode" required />
</label>
<label class="full-field">
<span class="form-label">Country/Region*</span>
<input id="country" name="country" required />
</label>
<button type="button" class="my-button">Save address</button>
<!-- Reset button provided for development testing convenience.
Not recommended for user-facing forms due to risk of mis-click when aiming for Submit button. -->
<input type="reset" value="Clear form" />
</form>
#functions {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("initAutocomplete");
}
}
}
I am using an HTML form with validation patterns from this article but I am unsure how to keep the same (style of) validation pattern for a telephone number of 10 characters starting with 0?
I simply have "[0-9]{10}" atm.
This will take care of the preceding 0 right? "0([0-9]){9}"
Do I need the other beginning "^(([-\w\d]+)" & end stuff ")$" from the other inputs to keep the patterns uniform for all inputs or is this just overcomplicating the requirement?
//sitepoint.com/instant-validation
//add event construct for modern browsers or IE
//which fires the callback with a pre-converted target reference
function addEvent(node, type, callback) {
if (node.addEventListener) {
node.addEventListener(
type,
function(e) {
callback(e, e.target);
},
false
);
} else if (node.attachEvent) {
node.attachEvent("on" + type, function(e) {
callback(e, e.srcElement);
});
}
}
//identify whether a field should be validated
//ie. true if the field is neither readonly nor disabled,
//and has either "pattern", "required" or "aria-invalid"
function shouldBeValidated(field) {
return (
!(field.getAttribute("readonly") || field.readonly) &&
!(field.getAttribute("disabled") || field.disabled) &&
(field.getAttribute("pattern") || field.getAttribute("required"))
);
}
//field testing and validation function
function instantValidation(field) {
//if the field should be validated
if (shouldBeValidated(field)) {
//the field is invalid if:
//it's required but the value is empty
//it has a pattern but the (non-empty) value doesn't pass
var invalid =
(field.getAttribute("required") && !field.value) ||
(field.getAttribute("pattern") &&
field.value &&
!new RegExp(field.getAttribute("pattern")).test(field.value));
//add or remove the attribute is indicated by
//the invalid flag and the current attribute state
if (!invalid && field.getAttribute("aria-invalid")) {
field.removeAttribute("aria-invalid");
} else if (invalid && !field.getAttribute("aria-invalid")) {
field.setAttribute("aria-invalid", "true");
}
}
}
//now bind a delegated change event
//== THIS FAILS IN INTERNET EXPLORER <= 8 ==//
//addEvent(document, 'change', function(e, target)
//{
// instantValidation(target);
//});
//now bind a change event to each applicable for field
var fields = [
document.getElementsByTagName("input"),
document.getElementsByTagName("textarea")
];
for (var a = fields.length, i = 0; i < a; i++) {
for (var b = fields[i].length, j = 0; j < b; j++) {
addEvent(fields[i][j], "change", function(e, target) {
instantValidation(target);
});
}
}
import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,700|Titillium+Web:200,400,400i,700&display=swap');
*,*:before,*:after {
box-sizing: border-box;
}
body {
font-family: 'Titillium Web', sans-serif;
font-size: 20px;
line-height: 1.4;
color: var(--color-woodsmoke);
}
:root {
--color-woodsmoke: #161B1E;
}
.container {
width:600px;
margin: 200px auto 0;
}
.container * {
transition: all 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
/*transition: all 220ms cubic-bezier(0.19, 1, 0.22, 1) 0s;*/
}
#contactForm fieldset {
border: none;
}
.form-control {
width: 100%;
display: block;
padding: .5rem 0;
font-size: 18px;
line-height: 1.25;
color: var(--color-woodsmoke);
-webkit-tap-highlight-color: transparent;
border: none;
border-bottom: 1px solid #767676;
background:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M7.9 17.1l-5.5-5.5-1.8 1.8L8 20.8 23.5 5.1l-1.8-1.8L7.9 17.1z" fill="%234eb239"/></svg>') no-repeat right -35px / 24px 24px;
/*transition: none;*/
}
.form-control:focus {
color: var(--color-woodsmoke);
/*background: none;*/
border-color: transparent;
outline: 0;
}
input[aria-invalid="true"].form-control,
textarea[aria-invalid="true"].form-control {
border-color: red;
}
.form-group {
position: relative;
margin-bottom: 2.5rem;
}
.form-control-placeholder {
position: absolute;
top: 0;
color: #767676;
}
.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder {
font-size: 70%;
transform: translate3d(0, -100%, 0);
}
input[aria-invalid="true"].form-control + .form-control-placeholder,
textarea[aria-invalid="true"].form-control + .form-control-placeholder {
font-size: 70%;
transform: translate3d(0, -100%, 0);
color: red;
}
.form-control:focus + .form-control-placeholder {
color: #115293;
}
.focus-border {
width: 100%;
height: 2px;
display: block;
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
transform: scaleX(0);
transition: transform 280ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
background-color: #115293;
}
.form-control:focus + .form-control-placeholder + .focus-border {
transform: scaleX(1);
}
.form-control:valid:not([aria-invalid="true"]) {
border-color: #57b846;
/*background: blue;*/
background-position: right center;
}
textarea.form-control:valid:not([aria-invalid="true"]) {
background-position: right 7px;
}
/*MOZ FIX*/
:not(output):-moz-ui-invalid {
box-shadow: none;
}
input:invalid {
box-shadow: none;
}
/*CHROME FIX*/
#-webkit-keyframes autofill {
to {
color: var(--color-woodsmoke);
background: transparent;
}
}
input:-webkit-autofill {
-webkit-animation-name: autofill;
-webkit-animation-fill-mode: both;
}
/*
input:-internal-autofill-selected {
background-color: red !important;
background-image: inherit !important;
color: var(--color-woodsmoke) !important;
}
*/
input:-webkit-autofill {
-webkit-text-fill-color: var(--color-woodsmoke);
}
input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--color-woodsmoke);
}
/*TEXTAREA*/
#txtMessage {
resize: none;
}
<div class="container">
<h4 class="align-center white text-shadow">Get in touch</h4>
<form id="contactForm" method="post" action="php/mail.php">
<fieldset>
<div class="form-group">
<input name="txtName" id="txtName" class="form-control" value="" aria-required="true" pattern="^([- \w\d\u00c0-\u024f]+)$" title="Your name" type="text" spellcheck="false" maxlength="30" required autofocus>
<label class="form-control-placeholder" for="txtName">Name</label>
<span class="focus-border"></span>
</div>
<div class="form-group">
<input name="txtEmail" id="txtEmail" class="form-control" value="" aria-required="true" pattern="^(([-\w\d]+)(\.[-\w\d]+)*#([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$" title="Your email address" type="email" spellcheck="false" maxlength="30" required>
<label class="form-control-placeholder" for="txtEmail">Email</label>
<span class="focus-border"></span>
</div>
<div class="form-group">
<input name="txtPhone" id="txtPhone" class="form-control" value="" aria-required="true" pattern="[0-9]{10}" title="Your telephone number" type="tel" spellcheck="false" maxlength="10" required>
<label class="form-control-placeholder" for="txtPhone">Telephone</label>
<span class="focus-border"></span>
</div>
<div class="form-group">
<textarea name="txtMessage" id="txtMessage" class="form-control" aria-required="true" cols="40" rows="7" spellcheck="true" title="Your enquiry" required></textarea>
<label class="form-control-placeholder" for="txtMessage">Enquiry</label>
<span class="focus-border"></span>
</div>
<button name="btnSubmit" id="btnSubmit" class="button primary" type="submit">Submit</button>
</fieldset>
</form>
</div>
The ^(([-\w\d]+) matches start of string (^) and then 1+ hyphens, underscores, letters or digits (note \w matches digits, too, so \d is redundant) and the )$ is just the end of a grouping construct and end of string assertion. So, if you do not plan to match any letters, digits, hyphens or underscores before the number, do not add the ([-\w\d]+) pattern, and the anchors - ^ (start of string) and $ (end of string) - are redundant - see below why.
In fact, you may just use
pattern="0[0-9]{9}"
It is enough because you already curbed the input field limit to 10 with maxlength="10":
<input name="txtPhone" id="txtPhone" class="form-control" value="" aria-required="true" pattern="0[0-9]{9}" title="Your telephone number" type="tel" spellcheck="false" maxlength="10" required>
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();
}
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