I'm using selenium to run tests on my front end. I have two drop down menus (whiteplayername and blackplayername) and a submit button. Both must have selected for a submit button (submit-button) to be enabled. When I run the code, it works fine. When I run the test, it is selecting an option from both the drop down menus but it the submit button isn't enabling. I have a feeling that this is because the selection is being made but somehow not being clicked. Here is my test:
#Test
#DisplayName("When whitePlayerName and blackPlayerName is selected, submit button is active")
void tesSubmitPage_whenNameIsSelectedFromBothDropDownMenus_submitButtonIsEnabled() {
List<WebElement> elements = driver.findElements(By.className("material-icons"));
elements.get(1).click();
WebElement dropdownWhite = driver.findElement(By.id("whiteplayername"));
Select selectWhite = new Select(dropdownWhite);
selectWhite.selectByValue("Hywel Griffiths");
WebElement dropdownBlack = driver.findElement(By.id("blackplayername"));
Select selectBlack = new Select(dropdownBlack);
selectBlack.selectByValue("Hywel Griffiths");
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
wait.until(ExpectedConditions.elementToBeClickable(By.id("submit-button")));
WebElement button = driver.findElement(By.id("submit-button"));
assertTrue("", button.isEnabled());
}
My javascript
<script type="module">
document.getElementById("submit-button").disabled = true;
const form = document.getElementById("form");
const submitButton = document.getElementById("submit-button");
const whitePlayerName = document.getElementById("whiteplayername");
const blackPlayerName = document.getElementById("blackplayername");
const firstNameBlack = document.getElementById("firstnameblack");
const firstNameWhite = document.getElementById("firstnamewhite");
const lastNameWhite = document.getElementById("lastnamewhite");
const lastNameBlack = document.getElementById("lastnameblack");
form.addEventListener('change', () => {
const whiteNameSelected = whitePlayerName.value;
// Disable white name inputs if white name is selected in the dropdown
firstNameWhite.disabled = whiteNameSelected;
lastNameWhite.disabled = whiteNameSelected;
// Determine if the white name is either selected or typed in the inputs
const validWhiteName = whiteNameSelected || (firstNameWhite.value && lastNameWhite.value);
const blackNameSelected = blackPlayerName.value;
// Disable black name inputs if black name is selected in the dropdown
firstNameBlack.disabled = blackNameSelected;
lastNameBlack.disabled = blackNameSelected;
// Determine if the black name is either selected or typed in the inputs
const validBlackName = blackNameSelected || (firstNameBlack.value && lastNameBlack.value);
const submitAvailable = validWhiteName && validBlackName && validSpaces;
submitButton.disabled = !submitAvailable;
if (!validWhiteName) {
document.getElementById("warningtext").textContent = "Please select at least one white name.";
} else if (!validBlackName) {
document.getElementById("warningtext").textContent = "Please select at least one black name.";
} else if (!validSpaces) {
document.getElementById("warningtext").textContent = "Please do not included spaces in the names.";
} else {
document.getElementById("warningtext").textContent = "";
}
});
form.addEventListener('input', () => {
const whiteNameSelected = whitePlayerName.value;
// Disable white name inputs if white name is selected in the dropdown
firstNameWhite.disabled = whiteNameSelected;
lastNameWhite.disabled = whiteNameSelected;
// Determine if the white name is either selected or typed in the inputs
const validWhiteName = whiteNameSelected || (firstNameWhite.value && lastNameWhite.value);
const blackNameSelected = blackPlayerName.value;
// Disable black name inputs if black name is selected in the dropdown
firstNameBlack.disabled = blackNameSelected;
lastNameBlack.disabled = blackNameSelected;
// Determine if the black name is either selected or typed in the inputs
const validBlackName = blackNameSelected || (firstNameBlack.value && lastNameBlack.value);
const validSpaces = !lastNameWhite.value.match(/\s+/g) && !firstNameWhite.value.match(/\s+/g) && !lastNameBlack.value.match(/\s+/g) && !firstNameBlack.value.match(/\s+/g);
const submitAvailable = validWhiteName && validBlackName && validSpaces;
submitButton.disabled = !submitAvailable;
if (!validWhiteName) {
document.getElementById("warningtext").textContent = "Please select at least one white name.";
} else if (!validBlackName) {
document.getElementById("warningtext").textContent = "Please select at least one black name.";
} else if (!validSpaces) {
document.getElementById("warningtext").textContent = "Please do not included spaces in the names.";
} else {
document.getElementById("warningtext").textContent = "";
}
});
</script>
and the thymeleaf html
<body style="background-color:rgb(68, 57, 57);">
<div class="warning">
<p id="warningtext"></p><br>
</div>
<div class="topnav">
<a th:href="#{main.html}"><i class="material-icons"
style="border:2px;font-size:60px;color:rgb(0, 0,
0);">arrow_back</i></a>
</div>
<div class="formformat">
<form th:object="${game}" th:action="#{/addgame}" th:method="post" id="form">
<label for="whiteplayername">Select white player:</label>
<select name="whiteplayername" id="whiteplayername" th:object="${names}" th:field="${game.whitePlayerName}">
<option th:value="null" th:selected="${game.name == null}"></option>
<th:block th:each="name : ${names}">
<option th:value="${name.name}"
th:text="${name.name}"></option>
</th:block>
</select>
<label for="blackplayername">Select black player:</label>
<select name="blackplayername" id="blackplayername" th:object="${names}"
th:field="${game.blackPlayerName}">
<option th:value="null" th:selected="${game.name == null}"></option>
<th:block th:each="name : ${names}">
<option th:value="${name.name}"
th:text="${name.name}"></option>
</th:block>
</select><br><br>
<label for="firstnamewhite">First name white:</label>
<input type="text" id="firstnamewhite" th:field="*{firstNameWhite}"/>
<label for="firstnameblack">First name black:</label>
<input type="text" id="firstnameblack" th:field="*{firstNameBlack}"/><br><br>
<label for="lastnamewhite">Last name white:</label>
<input type="text" id="lastnamewhite" th:field="*{lastNameWhite}"/>
<label for="lastnameblack">Last name black:</label>
<input type="text" id="lastnameblack" th:field="*{lastNameBlack}"/><br><br>
<label for="date">Date:</label><br>
<input type="date" id="date" th:field="*{date}">
<table>
<tr>
<th>Move</th>
<th>White</th>
<th>Black</th>
</tr>
<tr>
<td>1</td>
<td><input type="text" id="white1" th:field="*{moves}"></td>
<td><input type="text" id="black1" th:field="*{moves}"></td>
</tr>
</table>
<input type="submit" value="Submit" id="submit-button">
</form>
I've now changed my test to
#Test
#DisplayName("When whitePlayerName and blackPlayerName is selected, submit button is active")
void tesSubmitPage_whenNameIsSelectedFromBothDropDownMenus_submitButtonIsEnabled() throws InterruptedException {
List<WebElement> elements = driver.findElements(By.className("material-icons"));
elements.get(1).click();
JavascriptExecutor js = (JavascriptExecutor) driver;
WebElement whitePlayerNameDropdown = driver.findElement(By.id("whiteplayername"));
WebElement form = driver.findElement(By.id("form"));
Select whitePlayerNameSelect = new Select(whitePlayerNameDropdown);
whitePlayerNameSelect.selectByValue("Hywel Griffiths");
js.executeScript("arguments[0].dispatchEvent(new Event('change'))", form);
WebElement blackPlayerNameDropdown = driver.findElement(By.id("blackplayername"));
Select blackPlayerNameSelect = new Select(blackPlayerNameDropdown);
blackPlayerNameSelect.selectByValue("Hywel Griffiths");
js.executeScript("arguments[0].dispatchEvent(new Event('change'))", form);
WebElement button = driver.findElement(By.id("submit-button"));
assertTrue("", button.isEnabled());
}
to trigger the event through a change in the form, but no luck. Just in case it gives anyone any ideas.
Related
I have a form to change the personal details of the user. In this form I allow the user to change their email and/or password. With jQuery I want to show a 'Current Password' field when it detects that one of these fields is changed.
For the email field this means that when it is changed the password field appears, but when the email is re-entered correctly it hides itself again.
For the password field this means it simply shows when anything is typed inside the field.
I got the basics working, but I can't get them to work with each other. So when I change both and change one back, the Current Password field hides itself.
let requiredSet;
$('.js-show-target-on-change').on('input', function() {
const target = $('.js-show-target-on-change__target');
let currentValue = $(this).val();
if ( $(this).data('type') === 'email' ) {
const emailValue = $(this).data('value');
if ( currentValue !== emailValue && !requiredSet === true ) {
target.show();
target.find('input').prop('required', true);
requiredSet = true;
} else if ( currentValue === emailValue ) {
target.hide();
target.find('input').prop('required', false);
requiredSet = false;
}
} else {
if ( !requiredSet === true ) {
target.show();
target.find('input').prop('required', true);
requiredSet = true;
} else if ( !currentValue.length ) {
target.hide();
target.find('input').prop('required', false);
requiredSet = false;
}
}
});
JsFiddle
Would love some help with this since I've been stuck for so long... Thanks in advance!
EDIT: Here's a description of how the code works:
cost email = $('#email').val() // get the starting value of the email
// field to check if it has changed
$('.js-show-target-on-change').on('input', function(){
const f = $('#email').val() !== email
// check if the old email value is different than the new email value
|| $('#newPassword').val().length > 0
// check if there is text in the new password field
? 'show' : 'hide';
// if one of the above statements are true,show the field, else hide it
$('.js-show-target-on-change__target')[f]();
// update the field based on the above condition
});
If I understood your use case correctly the following code should do the job:
const email = $('#email').val();
$('.js-show-target-on-change').on('input', function() {
const f = $('#email').val() !== email || $('#newPassword').val().length > 0 ? 'show' : 'hide';
$('.js-show-target-on-change__target')[f]();
});
Use an attribute to specify the input value has been changed and later use that attribute to toggle the visibility of the input element.
$('.js-show-target-on-change').on('input', function() {
const target = $('.js-show-target-on-change__target');
let currentValue = this.value;
// if input is email
if (this.id === 'email') {
// get default value
let defValue = $(this).data('value');
// set attribute value based on old and default value
$(this).attr('data-changed', defValue !== currentValue);
} else {
// if password field then set attribute based on length
$(this).attr('data-changed', currentValue.length > 0);
}
// check number of changed fields
let visible = $('input[data-changed="true"]').length > 0;
// toggle based on the value
target.toggle(visible);
target.find('input').prop('required', visible);
});
$('.js-show-target-on-change').on('input', function() {
const target = $('.js-show-target-on-change__target');
let currentValue = this.value;
// if input is email
if (this.id === 'email') {
// get default value
let defValue = $(this).data('value');
// set attribute value based on old and default value
$(this).attr('data-changed', defValue !== currentValue);
} else {
// if password field then set attribute based on length
$(this).attr('data-changed', currentValue.length > 0);
}
// check number of changed fields
let visible = $('input[data-changed="true"]').length > 0;
// toggle based on the value
target.toggle(visible);
target.find('input').prop('required', visible);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" accept-charset="UTF-8" enctype="multipart/form-data" class="c-form">
<div class="c-form__row">
<label class="c-form__label" for="email">Email</label>
<div class="c-form__field">
<div class="c-input__control">
<input required class="c-input js-show-target-on-change" data-type="email" type="email" id="email" name="email" value="info#johndoe.com" data-value="info#johndoe.com">
</div>
</div>
</div>
<div class="c-form__row">
<label class="c-form__label" for="newPassword">New password</label>
<div class="c-form__field">
<div class="c-input__control">
<input class="c-input js-show-target-on-change" type="password" id="newPassword" name="newPassword">
</div>
</div>
</div>
<div class="c-form__row js-show-target-on-change__target" style="display: none;">
<label class="c-form__label" for="currentPassword">
Current password
<span class="u-warning">(required to change email or password)</span>
</label>
<div class="c-form__field">
<div class="c-input__control">
<input class="c-input" type="password" id="currentPassword" name="password">
</div>
</div>
</div>
<div class="c-form__submit">
<button class="c-button c-button--fullwidth" type="submit">Save</button>
</div>
</form>
I'm adding interactivity to a form.
Here is a snippet of the HTML:
<label for="name" id="nameLabel">Name:</label>
<input type="text" id="name" name="user_name">
There is a button at the bottom of the form, 'Register'. If the button is pressed and the Name field is empty, I want to add an alert message, reminding the user to enter their name. I want to do this by amending the label.
I am having trouble trying to select the inputted text of the text-field. Seeing as it's not value or innerHTML? How do I select it?
This is the code I have so far:
// Form validation. Display error messages and don't let the user submit the form if any of these validation errors exist:
document.querySelector("button").addEventListener("click", function() {
// Name field can't be empty
var nameInput = document.getElementById("name");
var nameLabel = document.getElementById("nameLabel");
if(nameInput.value === "") {
nameLabel.innerHTML = "Name: (please provide name)";
nameLabel.style.color = "red";
}
});
Use .value to get the value of input field and put css value red in inverted comma as nameLabel.style.color = "red"; Also since you have a
<button type ="submit">submit</button>
you need to stop you page from refreshing. Use e.preventDefault(); for this in your event handler
The flash of error that you get while in console is that red is not defined which it isn't since its a string and you need to give it in "".
document.querySelector("button").addEventListener("click", function() {
// Name field can't be empty
var nameInput = document.getElementById("name");
var nameLabel = document.getElementById("nameLabel");
if(nameInput.value === "") {
nameLabel.innerHTML = "Name: (please provide name)";
nameLabel.style.color = "red";
}
});
<label for="name" id="nameLabel">Name:</label>
<input type="text" id="name" name="user_name">
<button>Submit</button>
document.querySelector("button").addEventListener("click", function() {
// Name field can't be empty
var nameInput = document.getElementById("name");
var nameLabel = document.getElementById("nameLabel");
console.log("\"" + nameInput.value + "\"");
if(nameInput.value.length == 0) {
nameLabel.innerHTML = "Name: (please provide name)";
nameLabel.style.color = "red";
}
});
<label for="name" id="nameLabel">Name:</label>
<input type="text" id="name" name="user_name">
<button>Submit</button>
I've looked up a few other questions on the site, but am still at a loss. I wanted to use Javascript (no JQuery) to take the form below:
<!doctype html>
<html>
<head>
<meta charset = "UTF-8"/>
<title>Account Sign-Up</title>
</head>
<body>
<h1>Profile Sign-Up</h1>
<fieldset>
<p>
<p><label for = "first_name">First Name: </label>
<input type = "text" id = "first_name" onfocus = "javascript:showText(1)"/>
<div id = "div1" style = "display:none">Enter your first name</div>
<p><label for = "last_name">Last Name: </label>
<input type = "text" id = "last_name" onfocus = "showText(2)"/>
<div id = "div2" style = "display:none">Enter your last name</div>
<p><label for = "email">E-Mail: </label>
<input type = "text" id = "email" onfocus = "showText(3)"/>
<div id = "div3" style = "display:none">Enter E-Mail</div>
<p><label for = "username">Username: </label>
<input type = "text" id = "username" onfocus = "showText(4)"/>
<div id = "div4" style = "display:none">Enter your desired screen name</div>
<p><label for = "password">Password: </label>
<input type = "password" id = "password" onfocus = "showText(5)"/>
<div id = "div5" style = "display:none">Enter the password you will use to log into your account in the future</div>
<p><label for = "retype_password">Retype your password again: </label>
<input type = "password" id = "retype_password" onfocus = "showText(6)"/>
<div id = "div6" style = "display:none">Type your password again</div>
<p><button name = "submit" type = "button" id = "submit">Submit</button>
</p>
</fieldset>
<script src = "Q10.js"></script>
</body>
</html>
and apply the following script to display some hidden text whenever the text boxes gain focus. I don't wish to go beyond the scope of what is described. So no, I can't use pop-up tooltips or text in a single div element in a footer, etc. I'm also unconcerned with data injections or the vulnerability/security of the code, as I am not using it for anything practical.
var enableBtn = function () {
document.getElementById("submit").disabled = false;
};
//function enables submit button
var disableBtn = function () {
document.getElementById("submit").disabled = true;
};
//disables submit button
var checkInput = function () {
if (document.getElementById("password").value.length > 0 && document.getElementById("username").value.length > 0 && document.getElementById("password").value === document.getElementById("retype_password").value) {
enableBtn();
}
else {
disableBtn();
}
};
var showText = function (numb) {
document.getElementById("div" + numb).style = "display:inline";
};
var hideText = function(numb) {
document.getElementById("div" + numb).style = "display:none";
};
document.onfocus = checkInput
//if password and username have an input- and retype password is the same as password, button is usable. If not, it's disabled.
document.getElementById("retype_password").oninput = checkInput;
document.getElementById("password").oninput = checkInput
//document.getElementById("password").onclick = function() {alert(document.getElementById("password").value.length)};
//
I'm currently running into a hiccup because I can't get the events to run scripts on focus, and don't know where else to turn. Please help ><
I'm not sure whether this is the way you want it, check the snippet. If not i will close down this answer. what i did is to add/change some code in showText(). and i think it would be better to show those divs you used on hiding texts to span(or <p>)tag as well. i added css for hiding texts class named description. you can remove other codes that you made which is not useful.
var enableBtn = function () {
document.getElementById("submit").disabled = false;
};
//function enables submit button
var disableBtn = function () {
document.getElementById("submit").disabled = true;
};
//disables submit button
var checkInput = function () {
if (document.getElementById("password").value.length > 0 && document.getElementById("username").value.length > 0 && document.getElementById("password").value === document.getElementById("retype_password").value) {
enableBtn();
}
else {
disableBtn();
}
};
var showText = function(numb) {
var desc = document.getElementsByClassName("description");
for (var i = 0; i < desc.length; i++) {
desc[i].style.display ="none";
}
document.getElementById("div" + numb).style.display = "inline";
};
var hideText = function(numb) {
document.getElementById("div" + numb).style = "display:none";
};
document.onfocus = checkInput
//if password and username have an input- and retype password is the same as password, button is usable. If not, it's disabled.
document.getElementById("retype_password").oninput = checkInput;
document.getElementById("password").oninput = checkInput
//document.getElementById("password").onclick = function() {alert(document.getElementById("password").value.length)};
.description:before {
content: '*';
}
.description {
display: none;
color: red;
}
<h1>Profile Sign-Up</h1>
<fieldset>
<p>
<p><label for = "first_name">First Name: </label>
<input type = "text" id = "first_name" onfocus = "javascript:showText(1)"/>
<span id="div1" class="description">Enter your first name</span>
<p><label for = "last_name">Last Name: </label>
<input type = "text" id = "last_name" onfocus = "showText(2)"/>
<span id="div2" class="description">Enter your last name</span>
<p><label for = "email">E-Mail: </label>
<input type = "text" id = "email" onfocus = "showText(3)"/>
<span id="div3" class="description">Enter E-Mail</span>
<p><label for = "username">Username: </label>
<input type = "text" id = "username" onfocus = "showText(4)"/>
<span id="div4" class="description">Enter your desired screen name</span>
<p><label for = "password">Password: </label>
<input type = "password" id = "password" onfocus = "showText(5)"/>
<span id="div5" class="description">Enter the password you will use to log into your account in the future</span>
<p><label for = "retype_password">Retype your password again: </label>
<input type = "password" id = "retype_password" onfocus = "showText(6)"/>
<span id="div6" class="description">Type your password again</span>
<p><button name = "submit" type = "button" id = "submit">Submit</button>
</p>
</fieldset>
<!-- <script src = "Q10.js"></script> -->
It should work fine but there could be possible Problems:
1.If you are running this on JSFiddle then you can try. window.showText. Working fiddle: https://jsfiddle.net/24sck8rs/5/
window.showText = function (numb) {
document.getElementById("div" + numb).style = "display:inline";
};
2.Possible cause of hoisting. I have declared function variable at the top and removed var. Working fiddle: https://jsfiddle.net/24sck8rs/6/
3.Declare your script in head before function call
I am trying to have a select drop down with about 25 options certain choices that are picked will make another textbox field appear and be required. I tried making it grayed out and always there but since nothing was entered it was still required and would not process.
Now I have changed it to read-only and just wrote Not Required in the box since its filled out it would accept if its a required field.
But I really would like to learn how to make it just appear when that option is selected and once it appears make it required so the user can not go onto the next page until it is filled out.
(If you choose pickup or truck it is required)
So basically Dropdown makes textbox appear and required and not required when it is not showing
Does anyone have any ideas of how I could do this?
http://jsfiddle.net/of1sdq11/
function GVW(){
var dropdown1 = document.getElementById('vehiclebody');
var textbox = document.getElementById('gvw');
if(dropdown1.selectedIndex == 0){
textbox.value = "";
document.getElementById("gvw").readOnly = false;
}
else if(dropdown1.selectedIndex == 1) {
textbox.value = "NOT REQUIRED";
document.getElementById("gvw").readOnly = true;
}
else if(dropdown1.selectedIndex == 2) {
textbox.value = "";
document.getElementById("gvw").readOnly = false;
}
else if(dropdown1.selectedIndex == 3) {
textbox.value = "NOT REQUIRED";
document.getElementById("gvw").readOnly = true;
}
else if(dropdown1.selectedIndex == 4) {
textbox.value = "";
document.getElementById("gvw").readOnly = false;
}
else if(dropdown1.selectedIndex == 5) {
textbox.value = "NOT REQUIRED";
document.getElementById("gvw").readOnly = true;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select name="vehiclebody" id="vehiclebody" required="yes" message="Please select body." size="1" onChange="GVW();">
<option value="">Choose a Vehicle</option>
<option value="0">2Dr</option>
<option value="1">Pickup</option>
<option value="2">4dr</option>
<option value="3">Truck</option>
<option value="4">Convertible</option>
<option value="5">Van</option>
</select>
<input type="text" name="gvw" id="gvw" onfocus="this.select()" message="Please enter gross vehicle weight." value="">
If I am understanding you correctly, you want to make it so the textbox doesn't even show unless it is required. I modified the code a bit so that you don't need the list of if statements. By making an array that corresponds to the selectedIndex, you can just check the property!
Find the jsFiddle here: http://jsfiddle.net/of1sdq11/19/
First, I made the textbox start hidden. If the display is set to none, it will not be submitted with the form. If display is anything other than none, it will display and submit with the form. If you just wanted an invisible field that was always submitted, you would use visibility set to hidden instead!
<input type="text" name="gvw" id="gvw" onfocus="this.select()" message="Please enter gross vehicle weight." value="" style="display:none;">
Then I modified your code to show the textbox if the properties match. Now all you have to do is set whether required is true or false in the "is_required" variable to match the corresponding selectedIndex and it should work.
function GVW(){
var dropdown1 = document.getElementById('vehiclebody');
var textbox = document.getElementById('gvw');
// Array for storing whether the textbox is required
var is_required = [false, true, false, true, false, true];
// If dropdown1.selectedIndex is 0, it will pull the value from the 0 slot
// of the is_required array
if(is_required[dropdown1.selectedIndex]) {
textbox.required = true;
textbox.style.display = "inline-block";
} else {
textbox.value = "";
textbox.required = false;
textbox.style.display = "none";
}
}
Now on whatever page you are submitting to, you can just check to see if the textbox even existed in the form submission, and if it did, get the data, otherwise skip it!
jQuery Version With Modifications
After further discussion with the OP, I rewrote this to work with all jQuery, along with adding the ability to hide a label in addition. I thought that others may find it helpful, so I wanted to post it here. Find the fiddle here: http://jsfiddle.net/of1sdq11/26/
The HTML
<select name="vehiclebody" id="vehiclebody" required="yes" message="Please select body." size="1">
<option value="">Choose a Vehicle</option>
<option value="0">2Dr</option>
<option value="1">Pickup</option>
<option value="2">4dr</option>
<option value="3">Truck</option>
<option value="4">Convertible</option>
<option value="5">Van</option>
</select>
<div style="display:inline;">
<label for="gvw" style="display:none;"> Gross Vehicle Weight:*</label>
<input type="text" name="gvw" id="gvw" onfocus="this.select()" message="Please enter gross vehicle weight." value="" style="display:none;">
<p style="display:none;">*Gross Vehicle Weight is required for heavy trucks over 5000 lbs. Visit our website for more information. Heavy Truck Information and Fee Schedule based on GVW </p>
</div>
The jQuery
$(function() {
$('#vehiclebody').change(function() {
var selected_index = $(this).find(":selected").index();
var textbox = $('#gvw');
var label = textbox.siblings('label');
var paragraph = textbox.siblings('p');
// Array for storing whether the textbox is required
var is_required = [false, true, false, true, false, true];
// If dropdown1.selectedIndex is 0, it will pull the value from the 0 slot
// of the is_required array
if(is_required[selected_index]) {
textbox.attr("required", "true");
textbox.show();
label.show();
paragraph.show();
} else {
textbox.val("");
textbox.attr("required", "false");
textbox.hide();
label.hide();
paragraph.hide();
}
});
});
Here's what you need. Check this fiddle
http://jsfiddle.net/of1sdq11/15/
<select name="vehiclebody" id="vehiclebody" required="yes" message="Please select body." size="1" onChange="GVW();">
<option value="">Choose a Vehicle</option>
<option value="0">2Dr</option>
<option value="1">Pickup</option>
<option value="2">4dr</option>
<option value="3">Truck</option>
<option value="4">Convertible</option>
<option value="5">Van</option>
</select>
<input type="text" name="gvw" id="gvw" onfocus="this.select()" message="Please enter gross vehicle weight." value="" hidden>
.
function GVW(){
var dropdown1 = document.getElementById('vehiclebody');
var textbox = document.getElementById('gvw');
if(dropdown1.selectedIndex == 0){
textbox.value = "";
document.getElementById("gvw").hidden = false;
document.getElementById("gvw").required = "yes";
}
else if(dropdown1.selectedIndex == 1) {
textbox.value = "NOT REQUIRED";
document.getElementById("gvw").hidden = true;
document.getElementById("gvw").required = "no";
}
else if(dropdown1.selectedIndex == 2) {
textbox.value = "";
document.getElementById("gvw").hidden = false;
document.getElementById("gvw").required = "yes";
}
else if(dropdown1.selectedIndex == 3) {
textbox.value = "NOT REQUIRED";
document.getElementById("gvw").hidden = true;
document.getElementById("gvw").required = "no";
}
else if(dropdown1.selectedIndex == 4) {
textbox.value = "";
document.getElementById("gvw").hidden = false;
document.getElementById("gvw").required = "yes";
}
else if(dropdown1.selectedIndex == 5) {
textbox.value = "NOT REQUIRED";
document.getElementById("gvw").hidden = true;
document.getElementById("gvw").required = "no";
}
}
I am trying to write a pure JavaScript form validation that will add an error message next to the label elements if the input is empty.
The confirmEmail input gets an additional error message if it does not match the email input
My problem is that if you hit the submit button when all fields are empty, then put a value into the email input but leave confirmEmail empty and hit submit again, both error messages will appear next to the confirmEmail's label. The ideal result would be that confirmEmail only has text that says "Email does not match"
Here is a fiddle: http://jsfiddle.net/R5e2T/
Here is my HTML:
<div id="theForm">
<div>
<label for="firstName">First Name:</label>
<br>
<input type="text" id="firstName" name="first" value="" />
</div>
<div>
<label for="lastName">Last Name:</label>
<br>
<input type="text" id="lastName" name="last" value="" />
</div>
<div>
<label for="email">Email:</label>
<br>
<input type="email" id="email" name="email" value="" />
</div>
<div>
<label for="confirmEmail">Confirm Email:</label>
<br>
<input type="text" id="confirmEmail" name="confirmEmail" value="" />
</div>
<button type="button" id="submitButton">Submit</button>
</div>
Here is my JavaScript:
function validate () {
var theForm = document.getElementById('theForm'),
firstName = document.getElementById('firstName'),
lastName = document.getElementById('lastName'),
email = document.getElementById('email'),
confirmEmail = document.getElementById('confirmEmail'),
label = theForm.getElementsByTagName('label'),
input = theForm.getElementsByTagName('input'),
inputLength = input.length;
// Remove any spans that may have been added by the next for loop
for (var x = 0; x < inputLength; x++) {
var currLbl = label[x];
if ( currLbl.parentNode.getElementsByTagName('span').length > 0 ) {
var span = currLbl.parentNode.getElementsByTagName('span')[0];
removeElement(span);
}
}
// Error checking for the form.
// Add error message next to any element that has a blank value.
for (var i = 0; i < inputLength; i++) {
// innerText for IE, textContent for other browsers
var labelText = label[i].innerText || label[i].textContent;
var currLabel = label[i];
var text = document.createTextNode( labelText + ' cannot be empty');
if ( input[i].value === '' ) {
currLabel.parentNode.style.color = 'red';
currLabel.insertAdjacentHTML('afterend', ' <span>cannot be empty</span>');
}
else if ( input[i].value !== '') {
currLabel.parentNode.style.color = '';
}
}
// Test to see if confirmEmail is equal to email.
// If not add a warning message next to confirmEmail's label
if (confirmEmail.value !== email.value) {
var labelElement = confirmEmail.parentNode.getElementsByTagName('label')[0]
labelElement.insertAdjacentHTML('afterend', ' <span>Email does not match</span>');
labelElement.parentNode.style.color = 'red';
}
// Test to make sure all inputs have a value,
// and that confirmEmail equals email.
if (firstName.value !== '' && lastName.value !== '' && email.value !== '' && confirmEmail.value !== '' && email.value === confirmEmail.value) {
alert("Submitted!!!");
return true;
} else {
return false;
}
};
// Remove Element function
function removeElement(node) {
node.parentNode.removeChild(node);
}
(function () {
var button = document.getElementById('submitButton');
button.addEventListener('click', validate, false);
}());
I forked your fiddle.
What I did was to use innerHtml and just replace the text of the label, instead of creating new span-nodes and appending them to the document.
I store the original label, like "E-Mail" in a dataset variable, so that I can reset the label later.
Another solution is to add this before you add the "Email doensn't match" message:
var oldSpan = labelElement.parentNode.getElementsByTagName('span')[0];
removeElement(oldSpan);
An even better solution would be to check for confirmEmail matching email before checking for empty fields and do not add the "cannot be empty" message if another error message has been added already.