The validation works perfectly, but if the validation fails, the form clears all data.
How can I validate the form without causing the user to have to re-enter all the data again? Due to the nature of the redirect, I need the html form to render exactly as it does now.
HTML:
<div class="formHalf">
<label for="first_name">
First Name*</label>
<input id="first_name" maxlength="40" name="first_name" size="20" type="text" class="text" />
</div>
<div class="formHalf">
<label for="last_name">
Last Name*</label>
<input id="last_name" maxlength="80" name="last_name" size="20" type="text" class="text" />
</div>
<div class="formWhole">
<label for="company">
Company</label>
<input id="company" maxlength="40" name="company" size="20" type="text" class="text" />
</div>
<div class="formWhole">
<label for="address">
Address</label>
<input id="address" maxlength="80" name="address" size="20" type="text" class="text" />
</div>
<div class="formHalf">
<label for="city">
City</label>
<input id="city" maxlength="40" name="city" size="20" type="text" class="text" />
</div>
<div class="formHalf">
<label for="state">
State/Province</label><input id="state" maxlength="20" name="state" size="20" type="text"
class="text" />
</div>
<div class="formHalf">
<label for="zip">
Zip</label><input id="zip" maxlength="20" name="zip" size="20" type="text" class="text" />
</div>
<div class="formHalf">
<label for="country">
Country</label><input id="country" maxlength="40" name="country" size="20" type="text"
class="text" />
</div>
<div class="formHalf">
<label for="email">
Email*</label><input id="email" maxlength="80" name="email" size="20" type="text"
class="text" />
</div>
<div class="formHalf">
<label for="phone">
Phone*</label><input id="phone" maxlength="40" name="phone" size="20" type="text"
class="text" />
</div>
<div class="formWhole">
<label for="description">
Description</label><textarea name="description"></textarea>
</div>
<div class="formWhole">
<input type="submit" name="formSubmit" id="formSubmit">
</div>
</div>`
SCRIPT:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#formSubmit").click(function () {
for (i = 0; i < 1; i++) {
var isValid = validateForm();
if (isValid) { }
$("form").attr("action", "https://www.other web site that redirects back to my page after logging form");
}
});
});
function validateForm() {
var message = "";var message2="";
var elements = new Array("first_name", "last_name", "phone", "email");
var userElement = new Array(" First Name", "Last Name", "Phone Number", "E-Mail Address");
for (i = 0; i < elements.length; i++)
{
var x = document.getElementById(elements[i]).value;
if (x == null || x == "") {
if (message != "")
message += ", "; message += userElement[i];
}
if (i == 3 && x != null && x != "") {
var atpos = x.indexOf("#");
var dotpos = x.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
message2 += "The email address is not valid.";
}
}
if (i == 2 && x != null && x != "") {
var checknumber = x.replace(/[^0-9]/g, '');
if (checknumber.length != 10 && checknumber.length != 11) {
message2 += "The phone number is needs to be in format 123-456-7890 or 1-234-567-8901.";
}
}
// email and phone validation
}
if (message != "" || message2 != "") {
if (message != "") {
message += " must be filled out.";
}
message += message2;
alert(message);
return false;
}
return true;
}
</script>`
The easiest way is just to catch the POST or GET value's on the server's side. When using PHP for example you can refill the First name by adding the following the corresponding input-tag:
value="<?=$_POST['first_name']?>"
You should change the POST tot GET if it's a get-action. Don't forget to additionally validate at the server's side.
if the extension of your page is aspx then add the runat="server" attribute to each data input tag and then you will have the data persisted !
Related
good morning everyone. I have this form in which there is this select tag and the various input fields.
<form class="membership-form webform" name="CreaUtente"
action="CreaUtente" onsubmit="document.required()" method="post"
role="form">
<!-- VALORI UTENTE -->
<h6 class="modal-title" id="membershipFormLabel">Dati utente</h6>
<select name="select" class="form-control" hidden required>
<%
for (int j = 0; j < utenti.size(); j++) {
%>
<option id="list">
<%=utenti.elementAt(j).getUsername().toString()%>
</option>
<%
}
%>
</select>
<input type="text" class="form-control" name="nome"
placeholder="Nome" required> <input type="text"
class="form-control" name="cognome" placeholder="Cognome"
required> <input type="text" class="form-control"
name="email" placeholder="email"> <input type="date"
class="form-control" name="data" placeholder="data di nascita"
required>
<input type="text" class="form-control"
name="username" id="user" onkeyup="return Control()" placeholder="codice fiscale" required>
<p id="alert">warning</p>
<input
type="password" class="form-control" name="password"
placeholder="Password" required><input type="text"
class="form-control" name="numero"
placeholder="numero di telefono">
<button type="submit" class="form-control" id="submit-button"
name="Accedi"
style="background-color: #343a40 !important; color: white !important">Crea</button>
</form>`
I would like to make a function in javascript to check that the value I write in the "username" field is not already present in the select tag. How could I do? I tried this but it doesn't work.
`function Control(){
var username = document.getElementById("user");
var list = document.querySelectorAll("list");
var alert = document.getElementById("alert")
for(let i=0; i < list.length; i++){
if(list[i].value === user.value){
alert.style.color='red';
}
else{
alert.style.color='green';
}
}
}`
specify # before id name with querySelectorAll as its an id.
var list = document.querySelectorAll("#list");
And add break when it find a match, as it is again setting green, after matching the next option.
if (list[i].value === user.value) {
alert.style.color = 'red';
break;
}
I am creating a simple dynamic form where when user press 2 two fields will display and if he press one 1 fields will display
Issue faced :
If user enters 1 , one field is showing but if user deletes the 1 and press 2 instead of 1 the 3 fields showing
HTML CODE
<label for="textarea2b">Quantity</label>
<input type="number" name="name2" id="quantitypickup" onkeyup="showdimension()" value="" data-clear-btn="true" placeholder="">
<div id="dimshow" class="row">
</div>
JS CODE
function showdimension() {
var q = $("#quantitypickup").val();
var r = $("#dimshow");
if (q == "0" || q == "" || q == null) {
r.hide();
r.html('');
} else {
r.show();
for (var i = 0; i < q; i++) {
r.append(' <div class="col-xs-6"><label>Item Name ' + (i + 1) + '</label><input type="text" name="name2" id="itemname" onkeyup="" value="" data-clear-btn="true" placeholder=""></div><div class="col-xs-6"><div class="row"><div class="col-xs-4"><label>Length</label><input type="number" name="name2" onkeyup="" value="" data-clear-btn="true" placeholder=""><label style="text-align:center">inches</label></div><div class="col-xs-4"><label>Width</label><input type="number" name="name2" onkeyup="" value="" data-clear-btn="true" placeholder=""><label style="text-align:center">inches</label></div><div class="col-xs-4"><label>Height</label><input type="number" name="name2" value="" data-clear-btn="true" placeholder=""><label style="text-align:center">inches</label></div></div> </div></div>');
}
}
}
Please help
clear your html row each time user enter a number by $('.row').html('');
function showdimension() {
$('.row').html('');
var q = $("#quantitypickup").val();
var r = $("#dimshow");
if (q == "0" || q == "" || q == null) {
r.hide();
r.html('');
} else {
r.show();
for (var i = 0; i < q; i++) {
r.append(' <div class="col-xs-6"><label>Item Name ' + (i + 1) + '</label><input type="text" name="name2" id="itemname" onkeyup="" value="" data-clear-btn="true" placeholder=""></div><div class="col-xs-6"><div class="row"><div class="col-xs-4"><label>Length</label><input type="number" name="name2" onkeyup="" value="" data-clear-btn="true" placeholder=""><label style="text-align:center">inches</label></div><div class="col-xs-4"><label>Width</label><input type="number" name="name2" onkeyup="" value="" data-clear-btn="true" placeholder=""><label style="text-align:center">inches</label></div><div class="col-xs-4"><label>Height</label><input type="number" name="name2" value="" data-clear-btn="true" placeholder=""><label style="text-align:center">inches</label></div></div> </div></div>');
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="textarea2b">Quantity</label>
<input type="number" name="name2" id="quantitypickup" onkeyup="showdimension()" value="" data-clear-btn="true" placeholder="">
<div id="dimshow" class="row">
</div>
I have the following form
register.php
<form class="form" action="home.php" method ="POST" enctype="application/x-www-form-urlencoded">
<input type="email" name="email" placeholder="Email Address" id="email"/>
home.php
<script = "text.javasccript>
$('button').on('click', function(){
str = $('input').val();
str = str.split('#').slice(1);
var allowedDomains = [ 'correct.com' ];
if ($.inArray(str[0], allowedDomains) !== -1) {
alert(str + ' is allowed');
}else{
alert('not allowed');
}
});
</script>
I know this question has been asked before but there are no actual answers for it. Where do I integrate the following function to work with the registration form
THIS IS NEW, EDITED CODE BUT DOESNT WORK CAN ANYONE HELP?
My only output message is the one saying that the domain is not allowed even when I type the 'allowed' domain in. Here is my code:
register.php
<fieldset style = "border-radius:30px;">
<legend>Your Personal Details:</legend>
<form class="form" action="staffhome.php" method ="POST" enctype="application/x-www-form-urlencoded">
<br> <input type="text" name="forename" placeholder ="Forename" id="forename"style = "display:inline; float:left;margin-left:5%;"/>
<input type="text" name="surname" placeholder="Surname" id="surname"style = "display:inline; float:left;margin-left:5%;"/>
<input type="email" name="email" placeholder="Email Address" id="email"style = "display:inline; float:left;margin-left:5%;"/><br /><br><br><br>
<script type = "text/javascript">
$('form').on('submit', function(e){
str = $('input').val();
str = str.split('#').slice(1);
var allowedDomains = [ 'wearecallidus.com' ];
if ($.inArray(str[0], allowedDomains) !== -1) {
alert(str + ' is allowed');
}else{
alert('not allowed');
e.preventDefault();
}
});
</script>
<input type="text" name="phone" placeholder="Phone Number" id="phone"style = "display:inline;margin-right:2.5%"/>
<input type="text" name="ext" placeholder="Extension Number" id="ext"style = "display:inline;margin-left:2.5%;"/><br>
</br>
<hr style="border-top: dotted 1px;" />
<br> <input type="text" name="securityq" placeholder="Security Question" id="securityq" size ="32" maxlength ="60" style = "display:inline;"/>
<input type="text" name="securitya" placeholder="Security Answer" id="securitya" size="32"style = "display:inline;"/><br />
<br><input type="password" name="password" id="password" value="" size="32" placeholder="Type A Password" minlength="6"/><br><br>
<input type="password" name="password-check" id="password-check" value="" size="32" placeholder ="Re-Type Your Password" minlength="6"/><br>
</br>
<input id="button" type="submit" value="Register" disabled="disabled" name="submit">
</fieldset>
I get the same output message every time no matter what the input, can anyone tell me why?
I would do this if I were to have the js in the same page instead of externalising it:
<!DOCTYPE html>
<html>
<head>
<title>Form example</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
var allowedDomains = [ 'correct.com' ];
$('#myForm').on('submit', function(e) { // when the form is submitted
var str = $('#email').val(),
domain = str.split('#')[1]; // split on # and take the second part
if ($.inArray(domain, allowedDomains) == -1) {
alert(domain+' not allowed');
e.preventDefault(); // stop form submission
}
});
});
</script>
</head>
<body>
<div id="content">
<form id="myForm" class="form" action="home.php" method ="POST" enctype="application/x-www-form-urlencoded">
<input type="email" name="email" placeholder="Email Address" id="email"/>
<input type="submit" />
</form>
</div>
</body>
</html>
Example
$(function() {
var allowedDomains = ['correct.com'];
$('#myForm').on('submit', function(e) {
var str = $('#email').val(),
domain = str.split('#')[1];
if (!domain) domain="An empty domain"
$("#emailmsg").html("").hide()
if ($.inArray(domain, allowedDomains) == -1) {
$("#emailmsg").html(domain + ' not allowed').show();
e.preventDefault(); // stop form submission
}
});
});
#emailmsg { display:none; color:red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
<form id="myForm" class="form" action="home.php" method="POST" enctype="application/x-www-form-urlencoded">
<input type="email" name="email" placeholder="Email Address" id="email" /> <span id="emailmsg"></span><br/>
<input type="submit" />
</form>
</div>
Using your form after removing the disabled from the submit and added ID="myForm" and a span:
var allowedDomains = ['correct.com'];
function checkEmail(emailId) {
var $email=$("#"+emailId);
var str = $email.val(),domain = str.split('#')[1];
if (!domain) domain = "Empty domain";
if ($.inArray(domain, allowedDomains) == -1) {
$email.attr("placeholder", domain + ' not allowed').addClass("redborder");
}
else {
$email.attr("placeholder", "Email address").removeClass("redborder");
}
}
$(function() {
$('#myForm').on('submit', function(e) {
if (!checkEmail("email")) e.preventDefault(); // stop form submission
});
$("#email").on("keyup, blur",function() { checkEmail("email"); } );
});
.redborder {
border: 1px solid red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<fieldset style="border-radius:30px;">
<legend>Your Personal Details:</legend>
<form id="myForm" class="form" action="staffhome.php" method="POST" enctype="application/x-www-form-urlencoded">
<br>
<input type="text" name="forename" placeholder="Forename" id="forename" style="display:inline; float:left;margin-left:5%;" />
<input type="text" name="surname" placeholder="Surname" id="surname" style="display:inline; float:left;margin-left:5%;" />
<input type="email" name="email" placeholder="Email Address" id="email" style="display:inline; float:left;margin-left:5%;" />
<br>
<br>
<br>
<br>
<input type="text" name="phone" placeholder="Phone Number" id="phone" style="display:inline;margin-right:2.5%" />
<input type="text" name="ext" placeholder="Extension Number" id="ext" style="display:inline;margin-left:2.5%;" />
<br>
</br>
<hr style="border-top: dotted 1px;" />
<br>
<input type="text" name="securityq" placeholder="Security Question" id="securityq" size="32" maxlength="60" style="display:inline;" />
<input type="text" name="securitya" placeholder="Security Answer" id="securitya" size="32" style="display:inline;" />
<br />
<br>
<input type="password" name="password" id="password" value="" size="32" placeholder="Type A Password" minlength="6" />
<br>
<br>
<input type="password" name="password-check" id="password-check" value="" size="32" placeholder="Re-Type Your Password" minlength="6" />
<br>
</br>
<input id="button" type="submit" value="Register" name="mySubmit">
</fieldset>
If you're validating with javascript, I suggest having the script in the same page as the form. Also, since its javascript, why not do it dynamically instead of having to wait for the user to submit?
$('form').on('submit', function(e){
str = $('input').val();
str = str.split('#').slice(1);
var allowedDomains = [ 'correct.com' ];
if ($.inArray(str[0], allowedDomains) !== -1) {
alert(str + ' is allowed');
}else{
alert('not allowed');
e.preventDefault();
}
});
Working fiddle:
https://jsfiddle.net/j84mqq6k/1/
Try with this using jQuery.
var email = $("#email").val();
var atpos = email.indexOf("#");
var dotpos = email.lastIndexOf(".");
if (email === null || email === "") {
alert('Please enter email address.!');
$('#email').focus();
} else if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {
alert('Please enter valid email address.!');
$('#email').focus();
}
In a Form, there are multiple div Panels
<form>
<div class="panel1">
<input type="text" value="" name="bank0" id="bank0">
<input type="text" value="" name="shank0" id="shank0">
<input type="text" value="" name="dhank0" id="dhank0">
<input type="text" value="" name="raank0" id="raank0">
</div>
<hr>
<div class="panel2">
<input type="text" value="" name="bank1" id="bank1">
<input type="text" value="" name="shank1" id="shank1">
<input type="text" value="" name="dhank1" id="dhank1">
<input type="text" value="" name="raank1" id="raank1">
</div>
</form>
Requirement:
If user left panel1 blank and entered text to panel 2;
then we want to shift all values from panel 2 to panel 1; during final submission of form.
In real use case we have 10 such panels.
Fiddle: https://jsfiddle.net/rop5f0d6/
Try this.
var inputsValue = [];
$("button").click(function () {
$(".panel2 input").each(function () {
inputsValue.push(this.value);
});
$(".panel1 input").each(function (i, value) {
$(this).val(inputsValue[i]);
});
inputsValue = [];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="panel1">
<input type="text" value="" name="bank0" id="bank0">
<input type="text" value="" name="shank0" id="shank0">
<input type="text" value="" name="dhank0" id="dhank0">
<input type="text" value="" name="raank0" id="raank0">
</div>
<hr>
<div class="panel2">
<input type="text" value="" name="bank1" id="bank1">
<input type="text" value="" name="shank1" id="shank1">
<input type="text" value="" name="dhank1" id="dhank1">
<input type="text" value="" name="raank1" id="raank1">
</div>
<hr>
<button>Submit</button>
This will only move the data from panel 2 to panel 1 if the first panel is left blank (what I read from the requirements).
Also it wipes panel 2 data to prevent duplicate form data being posted. From your question I think this is what you are aiming for?
Here is how you can implement this functionality in jQuery:
$("button").click(function(){
var moveData = true, formvalues = [];
$(".panel1 input").each(function(e, field){
if( field.value != '' ){
moveData = false;
return false;
}
});
// only move data if first panel is blank
if( moveData ){
$(".panel2 input").each(function(){
formvalues.push( this.value );
this.value = '';
});
$(".panel1 input").each(function (i) {
this.value = formvalues[i];
});
}
});
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div class="panel1">
<input type="text" value="" name="bank0" id="bank0">
<input type="text" value="" name="shank0" id="shank0">
<input type="text" value="" name="dhank0" id="dhank0">
<input type="text" value="" name="raank0" id="raank0">
</div>
<hr>
<div class="panel2">
<input type="text" value="" name="bank1" id="bank1">
<input type="text" value="" name="shank1" id="shank1">
<input type="text" value="" name="dhank1" id="dhank1">
<input type="text" value="" name="raank1" id="raank1">
</div>
<hr>
<button>Submit</button>
I've also written the solution in vanilla JS for your reference (possibly useful) as plain JS is more efficient in performance.
var submitBtn = document.getElementsByTagName("button")[0];
submitBtn.addEventListener("click", function(){
var moveData = true,
formvalues = [],
panel1 = document.getElementsByClassName("panel1"),
panel1Fields = panel1[0].getElementsByTagName("input"),
panel2 = document.getElementsByClassName("panel2"),
panel2Fields = panel2[0].getElementsByTagName("input");
for(var i=0; i < panel1Fields.length; i++){
if( panel1Fields[i].value != '' ){
moveData = false;
return false;
}
}
// only move data if first panel is blank
if( moveData ){
for(var i=0; i < panel2Fields.length; i++){
formvalues.push( panel2Fields[i].value );
panel2Fields[i].value = '';
}
for(var i=0; i < panel1Fields.length; i++){
panel1Fields[i].value = formvalues[i];
}
}
});
<div class="panel1">
<input type="text" value="" name="bank0" id="bank0">
<input type="text" value="" name="shank0" id="shank0">
<input type="text" value="" name="dhank0" id="dhank0">
<input type="text" value="" name="raank0" id="raank0">
</div>
<div class="panel2">
<input type="text" value="" name="bank1" id="bank1">
<input type="text" value="" name="shank1" id="shank1">
<input type="text" value="" name="dhank1" id="dhank1">
<input type="text" value="" name="raank1" id="raank1">
</div>
<button>Send</button>
I need to use unobtrusive javascript/jquery to check if input fields have been filled out. If they are I need to display what input field that was. Not the value.
Here is the input form
<div class="inputCol">
<div class="formItem first-name">
<label>First Name:</label>
</div>
<div class="inputCol">
<input maxlength="40" size="35" id="firstName" name="firstName" class="imput_value" type="text" />
</div>
<div class="formItem last-name">
<label>Last Name:</label>
</div>
<div class="inputCol">
<input maxlength="40" size="35" id="lastName" name="lastName" class="imput_value" type="text" />
</div>
<div class="formItem email">
<label>Email:</label>
</div>
<div class="inputCol">
<input maxlength="40" size="35" id="email" name="email" class="imput_value" type="text" />
</div>
<div class="inputCol">
submit
</div>
So on click of the submit button I need it to alert "First Name, Email" if just the first name and email had input in them. These inputs do not need to be validated. As long as the field is not empty it should display that that input has been submitted.
This is the code I currently have, don't really know where to go from here:
$('a.submit_button').click(function(){
var validate= false;
$('input.imput_value').each(function(){
if($(this).val() != '' || $(this).attr('checked'))
validate = true;
});
if(validate){
var dataFilled = $(this).closest('.formItem').find('input').text().trim();
alert(dataFilled);
return false;
}
});
$('a.submit_button').click(function(){
var filledInputs = '';
$('input.imput_value').each(function(){
if($(this).val() !== '' || $(this).attr('checked')){
filledInputs += $(this).attr('name') + ', ';
}
});
if(filledInputs !== ''){
alert(filledInputs);
}
});
Should do what you want.