$('#add_product_form').on('submit',function(){
if ($('#product_date').val() == '') {
$('#product_date').addClass('border-danger');
}else{
$('#product_date').removeClass('border-danger');
}
if ($('#product_name').val() == '') {
$('#product_name').addClass('border-danger');
}else{
$('#product_name').removeClass('border-danger');
}
if ($('#select_category').val() == '') {
$('#select_category').addClass('border-danger');
}else{
$('#select_category').removeClass('border-danger');
}
if ($('#select_brand').val() == '') {
$('#select_brand').addClass('border-danger');
}else{
$('#select_brand').removeClass('border-danger');
}
if ($('#product_price').val() == '') {
$('#product_price').addClass('border-danger');
}else{
$('#product_price').removeClass('border-danger');
}
if ($('#product_quantity').val() == '') {
$('#product_quantity').addClass('border-danger');
}else{
$('#product_quantity').removeClass('border-danger');
}
})
This is one form with many fields. How can we shorten this code? I have tried same code in vanilla Javascript and obviously it contains more lines of code. Is there any better way to write this type of code?
It's best to make a function for repetitive things like this:
function validate($selector) {
$selector.toggleClass('border-danger', $selector.val() == '')
}
$('#add_product_form').on('submit',function(){
validate($('#product_date'));
validate($('#product_name'));
validate($('#select_category'));
validate($('#select_brand'));
validate($('#product_price'));
validate($('#product_quantity'));
});
You can use an each loop.
Adding a common class to the elements would simplify initial selector or use something like $(this).find(':input[required]').each...
$('#add_product_form').on('submit', function() {
$('#product_date,#product_name,#select_category,#select_brand,#product_price,#product_quantity').each(function() {
$(this).toggleClass('border-danger', !this.value);
});
});
Instead of having to maintain a list of fields in your JavaScript, use the required attribute and leverage this in your script. This also will leverage the browsers inbuilt validation. If you don't want to use the inbuilt validation you can use a different attribute as I've done below. If you want to use the normal required attribute, just use that instead of data-custRequired
$("#form").submit(function() {
var valid = true;
$(this).find("[data-custRequired]").each(function() {
var itemValid = true;
if (this.tagName === "FIELDSET") {
itemValid = $(this).find(":checked").length > 0;
}
//Otherwise validate normally
else {
itemValid = $(this).val() !== ""
}
$(this).toggleClass("danger-border", !itemValid );
if(!itemValid)
{
valid = false;
}
});
console.log("Form Valid = " + valid);
return false;
})
label {
display: block;
}
.danger-border {
border: red 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
<label>First Name <input type="input" name="firstName" data-custRequired /></label>
<label>Last Name <input type="input" name="lastName" data-custRequired /></label>
<label>Comment <input type="input" name="comment"></label>
<fieldset data-custRequired>
<legend>Can we contact you - required</legend>
<label><input type="radio" name="contact"> Yes </label>
<label><input type="radio" name="contact">No </label>
<label><input type="radio" name="contact">Maybe </label>
</fieldset>
<input type="submit">
</form>
Vanilla Javascript
Not a whole lot more needed
document.getElementById("form").addEventListener("submit", function(event) {
var requiredElements = this.querySelectorAll("[data-custRequired]");
var valid = true;
for (var i = 0; i < requiredElements.length; i++) {
var itemValid = true;
var el = requiredElements[i];
if (el.tagName === "FIELDSET") {
itemValid = el.querySelectorAll(":checked").length > 0;
} else {
itemValid = el.value !== "";
}
//To support IE 10 we don't use the inbuilt toggle
if (itemValid) {
el.classList.remove("danger-border");
} else {
el.classList.add("danger-border");
valid = false;
}
}
console.log("Form Valid = " + valid);
event.preventDefault();
return false;
})
label {
display: block;
}
.danger-border {
border: red 1px solid;
}
<form id="form">
<label>First Name <input type="input" name="firstName" data-custRequired /></label>
<label>Last Name <input type="input" name="lastName" data-custRequired /></label>
<label>Comment <input type="input" name="comment"></label>
<fieldset data-custRequired>
<legend>Can we contact you - required</legend>
<label><input type="radio" name="contact"> Yes </label>
<label><input type="radio" name="contact">No </label>
<label><input type="radio" name="contact">Maybe </label>
</fieldset>
<input type="submit">
</form>
Related
Sorry for any formatting error, first time posting.
Sorry if similar of this is already answered, I couldn't find it anywhere (or I'm just bad at searching).
I'm doing a page to register user to my website, my javascript doesn't work and I can't find what's wrong with it.
My html file does not display the alertbox which supposed to run if I leave my box empty, putting in the wrong characters, etc.
registration.html
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Registration Form</title>
</head>
<body onLoad="document.registration.userID.focus();">
<h1>Registration Form</h1>
<form name="registration" onSubmit="return validation();">
<label for="userID">User ID</label><br><input id="userID" name="userID" placeholder="Enter your ID" type="text"/><br>
<label for="userPass">Password</label><br><input id="userPass" name="userPass" placeholder="Enter your password" type="password" /><br>
<label for="userName">Username</label><br><input id="userName" name="userName" placeholder="Enter your username" type="text" /><br>
<label for="addr">Address</label><br><input id="addr" name="addr" placeholder="eg. Tamara Residence" type="text" /><br>
<label for="ctry">Country</label><br><select id="ctry" name="ctry">
<option value="DEF">Please select your country</option>
<option value="MY">Malaysia</option>
<option value="IN">India</option></select><br>
<label for="zip">Zip Code</label><br><input id="zip" name="zip" placeholder="eg. 25565" type="text" /><br>
<label for="email">Email</label><br><input id="email" name="email" placeholder="eg. nikfarisaiman109#gmail.com" type="text" /><br>
Sex<br>
<input type="radio" id="1" name="sex" value="1">
<label for="1">Male</label><br>
<input type="radio" id="2" name="sex" value="2">
<label for="2">Female</label><br>
Language<br>
<input type="checkbox" id="EN" name="EN" value="English">
<label for="EN">English</label><br>
<input type="checkbox" id="MY" name="MY" value="Malay">
<label for="MY">Malay</label><br>
<label for="about">About</label><br>
<textarea id="about" name="about" rows="4" cols="50">
</textarea><br><br>
<input name="submit" type="submit" value="Register" />
</form>
<script src="formValidation.js" type="text/javascript"></script>
</body>
</html>
formValidation.js
function validation(){
var userID = document.registration.userid;
var userPass = document.registration.password;
var userName = document.registration.name;
var addr = document.registration.address;
var ctry = document.registration.country;
var zip = document.registration.zip;
var email = document.registration.email;
var sex = document.registration.sex;
if (userID_validate(userID,5,12)) {
if (userPass_validate(userPass,7,12)) {
if (alphabet_validate(userName)) {
if (alphanumeric_validate(addr)) {
if (empty_validate(ctry)) {
if (allnumeric_validate(zip)) {
if (emailformat_validate(email)) {
if (sex_validate(sex)) {
}
}
}
}
}
}
}
}
return false;
}
function userID_validate(userID,a,b) {
//length of string
var userID_length = userID.value.length;
if (userID_length == 0 || userID_length >= a || userID_length < b) {
alert("ID should not be empty / length should be between " + a + " to " + b + " characters");
userID.focus();
return false;
}
return true;
}
function userPass_validate(userPass,a,b) {
//length of string
var userPass_length = userPass.value.length;
if (userPass_length == 0 || userPass_length >= a || userPass_length < b) {
alert("Password should not be empty / length should be between " + a + " to " + b + " characters");
userPass.focus();
return false;
}
}
function alphabet_validate(userName) {
var betReg = /^[A-Za-z]+$/;
if (userName.value.match(betReg)) {
return true;
}
else {
alert("Username should only contain alphabet");
userName.focus();
return false;
}
}
function alphanumeric_validate(addr) {
var betnumReg = /^[0-9A-Za-z]+$/;
if (addr.value.match(betnumReg)) {
return true;
}
else {
alert("Address can only be alphanumeric");
addr.focus();
return false;
}
}
function empty_validate(ctry) {
if(ctry.value == "DEF"){
alert("Please select a country");
ctry.focus();
return false;
}
else
return true;
}
function allnumeric_validate(zip) {
var numReg = /^[0-9]+$/;
if (zip.value.match(numReg)) {
return true;
}
else {
alert("ZIP Code should only contain only numbers");
zip.focus();
return false;
}
}
function emailformat_validate(email) {
var emailReg = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
if(email.value.match(emailReg))
return true;
else {
alert("Please enter in a correct email address format");
email.focus();
return false;
}
}
function sex_validate(sex) {
var formValid = false;
var x = 0;
while (!formValid && x < document.getElementById("sex").length) {
if (document.getElementById("sex")[x].checked)
formValid = true;
x++;
}
if (!formValid){
alert("Please select male or female");
sex.focus();
return false;
}
else {
alert("Form successfully submitted, thank you for registering!");
window.location.reload();
return true;
}
}
Did you check the error on Console via doing Inspect Element? I copied the same code as you mentioned in Question and getting this error in Console.
Uncaught TypeError: userID is undefined
In your formValidation.js, please update the
var userID = document.registration.userid;
With correct userID as follow.
var userID = document.registration.userID;
Try putting the <script> into <head>
So I am trying to create a registration form on a website with some basic html and javascript, and after figuring I made a short checker if both passwords were the same.
But whenever I press on submit all the values of the fields disappear how can I fix this?
I tried searching it on the web but it didnt help.
<form id="registerform" onsubmit=" return validateForm()">
First name:<br>
<label>
<input type="text" required="required" name="getfirstname">
</label><br>
Prefix:<br>
<input type="text" name="prefix"><br>
Last name:<br>
<input type="text" required="required" name="lastname"><br>
Email address:<br>
<input type="email" required="required" name="email"><br>
Password:<br>
<input type="password" required="required" name="password"><br>
Password2:<br>
<input type="password" required="required" name="password2"><br>
<input type="submit" value="Submit">
</form>
function validateForm() {
var x = document.forms["registerform"]["password"].value;
var y = document.forms["registerform"]["password2"].value;
if (y != x){
alert("The passwords do not match. Please try again!");
return false;
}
}
There are a few ways, for one you can submit the form with an AJAX request, save the data then fill it back in as soon as the form was submitted.
But why would you want to do this? What the user fills in should be cleared on submit.
If you just want to see the name of the input after you submit just use the placeholder tag, it can display a text in an input, clear that text when you start typing, and put it back when the form is empty:
<input placeholder="text">
you just have to specify that it is a javascript's function with tag ...
<script>
function validateForm() {
var x = document.forms["registerform"]["password"].value;
var y = document.forms["registerform"]["password2"].value;
if (y != x){
alert("The passwords do not match. Please try again!");
return false;
}
}
</script>
function formValidation()
{
var uid = document.registration.userid;
var passid = document.registration.passid;
var uname = document.registration.username;
var uadd = document.registration.address;
var ucountry = document.registration.country;
var uzip = document.registration.zip;
var uemail = document.registration.email;
var umsex = document.registration.msex;
var ufsex = document.registration.fsex; if(userid_validation(uid,5,12))
{
if(passid_validation(passid,7,12))
{
if(allLetter(uname))
{
if(alphanumeric(uadd))
{
if(countryselect(ucountry))
{
if(allnumeric(uzip))
{
if(ValidateEmail(uemail))
{
if(validsex(umsex,ufsex))
{
}
}
}
}
}
}
}
}
return false;
} function userid_validation(uid,mx,my)
{
var uid_len = uid.value.length;
if (uid_len == 0 || uid_len >= my || uid_len < mx)
{
alert("User Id should not be empty / length be between "+mx+" to "+my);
uid.focus();
return false;
}
return true;
}
function passid_validation(passid,mx,my)
{
var passid_len = passid.value.length;
if (passid_len == 0 ||passid_len >= my || passid_len < mx)
{
alert("Password should not be empty / length be between "+mx+" to "+my);
passid.focus();
return false;
}
return true;
}
function allLetter(uname)
{
var letters = /^[A-Za-z]+$/;
if(uname.value.match(letters))
{
return true;
}
else
{
alert('Username must have alphabet characters only');
uname.focus();
return false;
}
}
function alphanumeric(uadd)
{
var letters = /^[0-9a-zA-Z]+$/;
if(uadd.value.match(letters))
{
return true;
}
else
{
alert('User address must have alphanumeric characters only');
uadd.focus();
return false;
}
}
function countryselect(ucountry)
{
if(ucountry.value == "Default")
{
alert('Select your country from the list');
ucountry.focus();
return false;
}
else
{
return true;
}
}
function allnumeric(uzip)
{
var numbers = /^[0-9]+$/;
if(uzip.value.match(numbers))
{
return true;
}
else
{
alert('ZIP code must have numeric characters only');
uzip.focus();
return false;
}
}
function ValidateEmail(uemail)
{
var mailformat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(uemail.value.match(mailformat))
{
return true;
}
else
{
alert("You have entered an invalid email address!");
uemail.focus();
return false;
}
} function validsex(umsex,ufsex)
{
x=0;
if(umsex.checked)
{
x++;
} if(ufsex.checked)
{
x++;
}
if(x==0)
{
alert('Select Male/Female');
umsex.focus();
return false;
}
else
{
alert('Form Succesfully Submitted');
window.location.reload()
return true;
}
}
h1 {
margin-left: 70px;
}
form li {
list-style: none;
margin-bottom: 5px;
}
form ul li label{
float: left;
clear: left;
width: 100px;
text-align: right;
margin-right: 10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}
form ul li input, select, span {
float: left;
margin-bottom: 10px;
}
form textarea {
float: left;
width: 350px;
height: 150px;
}
[type="submit"] {
clear: left;
margin: 20px 0 0 230px;
font-size:18px
}
p {
margin-left: 70px;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>JavaScript Form Validation using a sample registration form</title>
<meta name="keywords" content="example, JavaScript Form Validation, Sample registration form" />
<meta name="description" content="This document is an example of JavaScript Form Validation using a sample registration form. " />
<link rel='stylesheet' href='js-form-validation.css' type='text/css' />
<script src="sample-registration-form-validation.js"></script>
</head>
<body onload="document.registration.userid.focus();">
<h1>Registration Form</h1>
<p>Use tab keys to move from one input field to the next.</p>
<form name='registration' onSubmit="return formValidation();">
<ul>
<li><label for="userid">User id:</label></li>
<li><input type="text" name="userid" size="12" /></li>
<li><label for="passid">Password:</label></li>
<li><input type="password" name="passid" size="12" /></li>
<li><label for="username">Name:</label></li>
<li><input type="text" name="username" size="50" /></li>
<li><label for="address">Address:</label></li>
<li><input type="text" name="address" size="50" /></li>
<li><label for="country">Country:</label></li>
<li><select name="country">
<option selected="" value="Default">(Please select a country)</option>
<option value="AF">Australia</option>
<option value="AL">Canada</option>
<option value="DZ">India</option>
<option value="AS">Russia</option>
<option value="AD">USA</option>
</select></li>
<li><label for="zip">ZIP Code:</label></li>
<li><input type="text" name="zip" /></li>
<li><label for="email">Email:</label></li>
<li><input type="text" name="email" size="50" /></li>
<li><label id="gender">Sex:</label></li>
<li><input type="radio" name="msex" value="Male" /><span>Male</span></li>
<li><input type="radio" name="fsex" value="Female" /><span>Female</span></li>
<li><label>Language:</label></li>
<li><input type="checkbox" name="en" value="en" checked /><span>English</span></li>
<li><input type="checkbox" name="nonen" value="noen" /><span>Non English</span></li>
<li><label for="desc">About:</label></li>
<li><textarea name="desc" id="desc"></textarea></li>
<li><input type="submit" name="submit" value="Submit" /></li>
</ul>
</form>
</body>
</html>
Change
<form id="registerform" onsubmit=" return validateForm()">
to
<form id="registerform" name="registerform" onsubmit=" return validateForm()">
to access form controls by name like in document.forms["registerform"]["password"] and ensure your javascript code is inside a script tag and returns true if validation is Ok.
<script>
function validateForm() {
var x = document.forms["registerform"]["password"].value;
var y = document.forms["registerform"]["password2"].value;
if (y != x){
alert("The passwords do not match. Please try again!");
return false;
}
return true;
}
</script>
https://jsfiddle.net/FranIg/pxgcbtLo/
I'm trying to disable the submit button until all inputs have some data. Right now the button is disabled, but it stays disabled after all inputs are filled in. What am I doing wrong?
$(document).ready(function (){
validate();
$('input').on('keyup', validate);
});
function validate(){
if ($('input').val().length > 0) {
$("input[type=submit]").prop("disabled", false);
} else {
$("input[type=submit]").prop("disabled", true);
}
}
Here's a modification of your code that checks all the <input> fields, instead of just the first one.
$(document).ready(function() {
validate();
$('input').on('keyup', validate);
});
function validate() {
var inputsWithValues = 0;
// get all input fields except for type='submit'
var myInputs = $("input:not([type='submit'])");
myInputs.each(function(e) {
// if it has a value, increment the counter
if ($(this).val()) {
inputsWithValues += 1;
}
});
if (inputsWithValues == myInputs.length) {
$("input[type=submit]").prop("disabled", false);
} else {
$("input[type=submit]").prop("disabled", true);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="submit" value="Join">
Vanilla JS Solution.
In question selected JavaScript tag.
HTML Form:
<form action="/signup">
<div>
<label for="username">User Name</label>
<input type="text" name="username" required/>
</div>
<div>
<label for="password">Password</label>
<input type="password" name="password" />
</div>
<div>
<label for="r_password">Retype Password</label>
<input type="password" name="r_password" />
</div>
<div>
<label for="email">Email</label>
<input type="text" name="email" />
</div>
<input type="submit" value="Signup" disabled="disabled" />
</form>
JavaScript:
var form = document.querySelector('form')
var inputs = document.querySelectorAll('input')
var required_inputs = document.querySelectorAll('input[required]')
var register = document.querySelector('input[type="submit"]')
form.addEventListener('keyup', function(e) {
var disabled = false
inputs.forEach(function(input, index) {
if (input.value === '' || !input.value.replace(/\s/g, '').length) {
disabled = true
}
})
if (disabled) {
register.setAttribute('disabled', 'disabled')
} else {
register.removeAttribute('disabled')
}
})
Some explanation:
In this code we add keyup event on html form and on every keypress check all input fields. If at least one input field we have are empty or contains only space characters then we assign the true value to disabled variable and disable submit button.
If you need to disable submit button until all required input fields are filled in - replace:
inputs.forEach(function(input, index) {
with:
required_inputs.forEach(function(input, index) {
where required_inputs is already declared array containing only required input fields.
JSFiddle Demo: https://jsfiddle.net/ydo7L3m7/
You could try using jQuery Validate
http://jqueryvalidation.org/
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
And then do something like the following:
$('#YourFormName').validate({
rules: {
InputName1: {
required: true
},
InputName2: { //etc..
required: true
}
}
});
Refer to the sample here.
In this only input of type="text" has been considered as described in your question.
HTML:
<div>
<form>
<div>
<label>
Name:
<input type="text" name="name">
</label>
</div>
<br>
<div>
<label>
Age:
<input type="text" name="age">
</label>
</div>
<br>
<div>
<input type="submit" value="Submit">
</div>
</form>
</div>
JS:
$(document).ready(function () {
validate();
$('input').on('keyup check', validate);
});
function validate() {
var input = $('input');
var isValid = false;
$.each(input, function (k, v) {
if (v.type != "submit") {
isValid = (k == 0) ?
v.value ? true : false : isValid && v.value ? true : false;
}
if (isValid) {
$("input[type=submit]").prop("disabled", false);
} else {
$("input[type=submit]").prop("disabled", true);
}
});
}
Try to modify your function like this :
function validate(){
if ($('input').val() != '') {
$("input[type=submit]").prop("disabled", false);
} else {
$("input[type=submit]").prop("disabled", true);
}
}
and place some event trigger or something like onkeyup in jquery.But for plain js, it looks like this :
<input type = "text" name = "test" id = "test" onkeyup = "validate();">
Not so sure of this but it might help.
Here is a dynamic code that check all inputs to have data when wants to submit it:
$("form").submit(function(e) {
var error = 0;
$('input').removeClass('error');
$('.require').each(function(index) {
if ($(this).val() == '' || $(this).val() == ' ') {
$(this).addClass('error');
error++;
}
});
if (error > 0) {
//Means if has error:
e.preventDefault();
return false;
} else {
return true;
}
});
.error {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form>
<form action="google.com">
<input type="text" placeholder="This is input #1" class="require" />
<input type="text" placeholder="This is input #2" class="require" />
<input type="submit" value="submit" />
</form>
</form>
Now you see there is a class called require, you just need to give this class to inputs that have to have value then this function will check if that input has value or not, and if those required inputs are empty Jquery will prevent to submit the form!
Modify your code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="submit" value="Join">
<script>
$(document).ready(function (){
validate();
$('input').on('keyup', validate);
});
function validate(){
$("input[type=text]").each(function(){
if($(this).val().length > 0)
{
$("input[type=submit]").prop("disabled", false);
}
else
{
$("input[type=submit]").prop("disabled", true);
}
});
}
</script>
function disabledBtn(_className,_btnName) {
var inputsWithValues = 0;
var _f = document.getElementsByClassName(_className);
for(var i=0; i < _f.length; i++) {
if (_f[i].value) {
inputsWithValues += 1;
}
}
if (inputsWithValues == _f.length) {
document.getElementsByName(_btnName)[0].disabled = false;
} else {
document.getElementsByName(_btnName)[0].disabled = true;
}
}
<input type="text" class="xxxxx" onKeyUp="disabledBtn('xxxxx','fruit')"><br>
<input type="text" class="xxxxx" onKeyUp="disabledBtn('xxxxx','fruit')"><br>
<input type="text" class="xxxxx" onKeyUp="disabledBtn('xxxxx','fruit')"><br>
<input type="submit" value="Join" id="yyyyy" disabled name="fruit">
Can someone help me make this alert look much nicer? Like Maybe split up Each text box on its own line? I can not figure out how to make this look a lot cleaner and not just all piled on one line.
To see alert hit Lien radio button and then hit next without filling textboxes
http://jsfiddle.net/t4Lgm0n2/9/
function validateForm(){
var QnoText = ['lien']; // add IDs here for questions with optional text input
var ids = '';
flag = true;
for (i=0; i<QnoText.length; i++) {
CkStatus = document.getElementById(QnoText[i]).checked;
ids = QnoText[i]+'lname';
var eD = "";
if (CkStatus && document.getElementById(ids).value == '') {
eD = eD+' lienholder name';
document.getElementById(ids).focus();
flag = false;
}
ids2 = QnoText[i]+'laddress';
if (CkStatus && document.getElementById(ids2).value == '') {
eD=eD+' lienholder address';
document.getElementById(ids2).focus();
flag = false;
}
ids3 = 'datepicker2';
if (CkStatus && document.getElementById(ids3).value == '') {
eD=eD+' lien date';
document.getElementById(ids3).focus();
flag = false;
}
if(eD!="") alert("Please enter "+eD);
}
return flag;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="radio" value="Yes" name="lien" id="lien" required="yes" onchange="showhideForm(this.value);"/><label for="lien">Lien</label>
<input type="radio" value="None" name="lien" id="nolien" onchange="showhideForm(this.value);"/><label for="nolien">No Lien</label>
<script type="text/javascript">
function showhideForm(lien) {
if (lien == "Yes") {
document.getElementById("div1").style.display = 'block';
document.getElementById("div2").style.display = 'none';
}
else if (lien == "None") {
document.getElementById("div2").style.display = 'block';
document.getElementById("div1").style.display = 'none';
$("#div1 > .clearfix input:text").val("");
}
}
</script>
<div id="div1" style="display:none">
<div class="clearfix">
<label for="lname">Lienholder Name:</label>
<input type="text" name="lienlname" validateat="onSubmit" validate="maxlength" id="lienlname" size="54" maxlength="120" message="Please enter lienholder name." value="">
</p>
<p>
<label for="laddress">Lienholder Address:</label>
<input type="text" name="lienladdress" validateat="onSubmit" validate="maxlength" id="lienladdress" size="54" maxlength="120" message="Please enter lienholder address." value="">
</p>
<p>
<label for="ldate">Date of Lien:</label>
<input type="text" name="lienldate" id="datepicker2" mask="99/99/9999" value="">
</div>
</div>
<div id="div2" style="display:none">
<!---You are not qualified to see this form.--->
</div>
<input type="submit" name="submit" value="Next" onclick="validateForm()">
You can use new line characters \n to make text more readable:
var eD = [];
if (CkStatus && document.getElementById(ids).value == '') {
eD.push('Please enter lienholder name');
document.getElementById(ids).focus();
flag = false;
}
// ...
if (eD.length) alert(eD.join('\n'));
As you can see I'm also pushing error messages into ed array, which makes it more convenient to concatenate resulting message using .join() method.
Demo: http://jsfiddle.net/t4Lgm0n2/11/
I want to avoid using a for loop to validate a set of radio buttons. I know that its possible to use their boolean value to do this I just cannot seem to execute it. Is there a better way to do this?
Here are my buttons:
<form method="post" name="newUser" onsubmit="return proc()">
First name:<br />
<input type="text" id="fName" /><br />
<div id="first_name_error"></div>
Last name:<br />
<input type="text" name="lName" /><br />
<div id="last_name_error"></div>
E-mail address:<br />
<input type="text" name="eMail" /><br />
<div id="email_error"></div>
Gender:<input type="radio" name"sex" value="male" />Male
<input type="radio" name="sex" value="female" />Female<br />
<div id="gender_error"></div>
Here is my JS:
function proc(){
var errmsg = "";
if (document.forms["newUser"]["fName"].value == "")
{
document.getElementById('first_name_error').innerHTML = "*This field is required";
document.getElementById('first_name_error').style.color = "red";
}
if (document.forms["newUser"]["lName"].value == "")
{
document.getElementById('last_name_error').innerHTML = "*This field is required";
document.getElementById('last_name_error').style.color = "red";
}
if (document.forms["newUser"]["eMail"].value == "")
{
document.getElementById('email_error').innerHTML = "*This field is required";
document.getElementById('email_error').style.color = "red";
}
if (document.forms["newUser"].sex == false)
{
document.getElementById('gender_error').innerHTML = "*Please select gender";
document.getElementById('gender_error').style.color = "red";
}
return false;
}
I think you'd better assign two ids to two radio buttons (radbtnMale, radbtnFemale for example)
Then check:
if (document.getElementById("radbtnMale").checked == false && document.getElementById("radbtnFemale").checked == false) {
document.getElementById('gender_error').innerHTML = "*Please select gender";
document.getElementById('gender_error').style.color = "red";
} else {
//
}
Try this (jQuery):
if($('input[name=n]:checked').length==0){
//error
}else{
//OK
}