Develop Reference

Form Validation is successful but form doesn't submit

I have a simple form where I am using a vanilla JS library (https://pristine.js.org/) for form validation. The form validation is successful (mostly) but then the form doesn't submit. For the life of me I can't figure out what's going wrong.The form is supposed to post to a PHP file where I can get the posted variable values.
My HTML page with the form and necessary JS and CSS are in the jsfiddle here. In case JSFiddle is acting up, the actual code's below.
I'd appreciate it if someone can help me out with this.
Thanks a ton!
Dexxterr
P.S.: I've beginner level knowledge about JS.
My HTML Code:
<div style="width: 50%; margin: auto;">
<form class="fv-stacked-form" id="inquiry" method="POST" action="form.php">
<div class="fv-row form-group">
<label>Which industry does your organization belong to?</label>
<div>
<input class="form-control" type="checkbox" name="industry[]" value="Manufacturing" id="indManufacturing" min="1" required data-pristine-min-message="Select at least 1" />
<label class="label-inline" for="indManufacturing">Manufacturing</label>
</div>
<div>
<input class="form-control" type="checkbox" name="industry[]" value="Education" id="indEducation" min="1" required data-pristine-min-message="Select at least 1" />
<label class="label-inline" for="indEducation">Education</label>
</div>
<div>
<input class="form-control" type="checkbox" name="industry[]" value="Real Estate" id="indRealestate" min="1" required data-pristine-min-message="Select at least 1" />
<label class="label-inline" for="indRealestate">Real Estate</label>
</div>
<div>
<input class="form-control" type="checkbox" name="industry[]" value="" id="indOther" min="1" required data-pristine-min-message="Select at least 1" />
<label class="label-inline" for="indOther">Other</label>
<input style="display: none;" class="label-inline" type="text" name="indOtherValue" id="indOtherValue" value="" minlength="3" class="form-control" data-pristine-min-message="Please enter your industry" />
</div>
</div>
<div class="fv-row form-group">
<label>What is your budget? (In USD)</label>
<input class="form-control" type="number" min="100" required name="budget" data-pristine-min-message="Enter at least 100" />
</div>
<div class="fv-row form-group">
<label>How soon do you want to get started??</label>
<div>
<input class="form-control" type="radio" name="timeline[]" value="Immediately" id="immediately" required />
<label class="label-inline" for="immediately">Immediately</label>
</div>
<div>
<input class="form-control" type="radio" name="timeline[]" value="3Months" id="3months" required />
<label class="label-inline" for="3months">In the next 3 months</label>
</div>
<div>
<input class="form-control" type="radio" name="timeline[]" value="6Months" id="6months" required />
<label class="label-inline" for="6months">In the next 6 months</label>
</div>
<div>
<input class="form-control" type="radio" name="timeline[]" value="NoIdea" id="noidea" required />
<label class="label-inline" for="noidea">I don't have a timeline yet</label>
</div>
</div>
<div class="fv-row form-group">
<label>First Name</label>
<input class="form-control" type="text" name="fname" required />
</div>
<div class="fv-row form-group">
<label>Last Name</label>
<input class="form-control" type="text" name="lname" required />
</div>
<div class="fv-row form-group">
<label>Company Email</label>
<input class="form-control" type="email" name="email" required />
</div>
<div class="fv-row form-group">
<label>No. of Employees</label>
<select class="form-control" id="ageRangeField" required>
<option value=""></option>
<option value="1-100">1-100</option>
<option value="100-500">100-500</option>
<option value="500-2500">500-2500</option>
<option value="2500+">2500+</option>
</select>
</div>
<div class="fv-row form-group">
<input name="formsubmit" id="formsubmit" type="submit" class="" value="Submit" />
</div>
</form>
<p id="confmsg" style="display: none;">Thank you for submitting the form.</p>
</div>
My JS Code:
window.onload = function ()
{
var form = document.getElementById("inquiry");
var pristine = new Pristine(form);
form.addEventListener('submit', function (e)
{
e.preventDefault();
var valid = pristine.validate();
// alert('Form is valid: ' + valid);
if(valid === true)
{
// alert("This works");
return true;
}
else
{
// alert("This doesn't work");
}
});
};
var sb = document.getElementById('formsubmit'); // Submit button
var cbother = document.getElementById('indOther'); // Checkbox
var txtother = document.getElementById('indOtherValue'); // Other Textbox
cbother.addEventListener('click',function(e){
if(cbother.checked){
cbother.value=txtother.value;
txtother.style.display = 'block';
}else{
txtother.value='';
txtother.style.display = 'none';
}
},false);

e.preventDefault();
is preventing the form from being submitted. If you simply remove it the form will be submitted even if the pristine check fails. So what you want to do is only prevent the default behaviour (which is the form to be submitted) if the pristine check fails:
form.addEventListener('submit', function (e)
{
var valid = pristine.validate();
// alert('Form is valid: ' + valid);
if(valid === true)
{
// alert("This works");
return true;
}
else
{
e.preventDefault();
// alert("This doesn't work");
}
});
to simplify that a little you could simply write:
form.addEventListener('submit', function (e)
{
//if the pristine check fails, prevent the form from being submitted
if(!pristine.validate()){
e.preventDefault();
}
});

Show/Hide the part of the form based on checkbox selected?

I have two checkboxes First and Second
<input type="checkbox" name="checkbox1" id="checkbox1" value="checkbox1" /> First
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="checkbox2" /> Second
And form with three input content, name,phone,address.
<form id="f1">
<div class="form-row">
<div class="form-group col-md-6">
<label for="first">Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="form-group col-md-6">
<label for="">Phone</label>
<input type="text" class="form-control" id="phone" name="phone" required>
</div>
<div class="form-group col-md-6">
<label for="inputCity">Address</label>
<input type="text" class="form-control" id="address" name="address" required>
</div>
</div>
</form>
When the first checkbox is selected - display the first two content - name and phone, Similarly for the second checkbox if selected - display the last content - address
What I have tried:
https://jsfiddle.net/thorstorm1102/16hgpt0z/3/
I tried to hide the whole form:
var form1 = document.querySelector("#f1"),
form2 = document.querySelector("#f2"),
check1 = document.querySelector("#checkbox1"),
check2 = document.querySelector("#checkbox2");
check1.onchange = function() {
form1.classList.toggle("hidden");
}
css
.hidden {
display: none;
}
Any suggestions on how to show only first two content or last content depending on the checkbox selected?

I have added two options first in vanila js and second one is in jquery
/*---- Plain JS----*/
check1.onchange = function() {
if(this.checked){
document.querySelector("#address").closest('.form-group').style.display = "none";
}
else{
document.querySelector("#address").closest('.form-group').style.display = "";
}
}
check2.onchange = function() {
if(this.checked){
document.querySelector("#name").closest('.form-group').style.display = "none";
document.querySelector("#phone").closest('.form-group').style.display = "none";
}
else{
document.querySelector("#name").closest('.form-group').style.display = "";
document.querySelector("#phone").closest('.form-group').style.display = "";
}
}
/*----Jquery----*/
$(document).on('change','#checkbox1',function(){
if($(this).is(":checked")){
$('#address').closest('.form-group').hide();
}
else{
$('#address').closest('.form-group').show();
}
});
$(document).on('change','#checkbox2',function(){
if($(this).is(":checked")){
$('#name').closest('.form-group').hide();
$('#phone').closest('.form-group').hide();
}
else{
$('#name').closest('.form-group').show();
$('#phone').closest('.form-group').show();
}
});
https://jsfiddle.net/1zu0nsjr/

I used JQuery for something similar sometime back.
function firstCheckBox() {
$("#address1").hide();
$("#name1").show();
$("#phone1").show();
}
function secondCheckBox() {
$("#name1").hide();
$("#phone1").hide();
$("#address1").show();
}
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox1" id="checkbox1" value="checkbox1" onclick="firstCheckBox()" /> First
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="checkbox2" onclick="secondCheckBox()" /> Second
<form id="f1">
<div class="form-row">
<div class="form-group col-md-6" id="name1">
<label for="first">Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="form-group col-md-6" id="phone1">
<label for="">Phone</label>
<input type="text" class="form-control" id="phone" name="phone" required>
</div>
<div class="form-group col-md-6" id="address1">
<label for="inputCity">Address</label>
<input type="text" class="form-control" id="address" name="address" required>
</div>
</div>
</form>
You can use input type = radio and have the same name for both of you want only 1 to be checked.
Hope this helps.

You need a radio button for this functionality
Radio buttons can only have one option picked at a time, that seems to be what you want you are not going to get the functionality you require with a checkbox, which by it's own design can have multiple options checked at the same time.
So for your HTML you can do the following
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My first website</title>
<link rel="stylesheet" href="css-01/css/styles.css">
</head>
<body>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<form id="f1">
<div class="form-row">
<div class="form-group col-md-6">
<label for="first">Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="form-group col-md-6">
<label for="">Phone</label>
<input type="text" class="form-control" id="phone" name="phone" required>
</div>
<div class="form-group col-md-6">
<label for="inputCity">Address</label>
<input type="text" class="form-control" id="address" name="address" required>
</div>
</div>
</form>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="custom.js"></script>
</html>
for your JS you can do the following.
$('#male').click(function() {
$("#name").show();
$("#phone").show();
$("#address").hide();
});
$('#female').click(function() {
$("#name").hide().
$("#phone").hide().
$("#address").show();
});

How to get focusin for all textbox? using javascript event not using jquery

Hello Guys, I need help a little bit. Can anyone help me, how to use
this keyword in my case?
<form>
<div class="form-group">
<label for="txtFirstName">Your name</label>
<input id="txtFirstName" name="txtFirstName" type="text" autocomplete="off" class="inputBox" />
</div>
<div class="form-group">
<label for="txtEmail">Email address</label>
<input id="txtEmail" name="txtEmail" type="email" autocomplete="off" class="inputBox" />
</div>
<div class="form-group">
<select id="drpPosition" name="drpPosition">
<option>I would describe my user type as </option>
<option>Web developer </option>
<option>Web designer </option>
</select>
</div>
<div class="form-group">
<label for="txtPassword">Password</label>
<input id="txtPassword" type="password" class="cool" autocomplete="off" class="inputBox" />
<small>Minimum 8 characters</small>
</div>
<div class="form-group">
<input type="submit" name="btnSubmit" id="btnSubmit" value="Next" />
</div>
</form>
This is my JavaScript Code:
var inputFirstName = document.querySelector('.inputBox');
console.log(inputFirstName);
this.addEventListener('focusin', inputAddClassFunc);
this.addEventListener('focusout', inputRemoveClassFunc);
function inputAddClassFunc(event){
console.log(this);
this.previousElementSibling.classList.add('active');
}
function inputRemoveClassFunc(event){
var hasValue = this.value;
if(!hasValue) {
this.previousElementSibling.classList.remove('active');
}
}
When I focusin into the textbox, active class will be added to it's
sibling's lable And in my case, It only works in first textbox but not
for all textbox. How can I use "this" to works for all textbox?

I'd use event delegation instead - add focusin and focusout listeners to the form, and when the event fires, if the target of the event is one of the .inputBoxes, carry out the logic to change the class of the event.target.previousElementSibling:
const form = document.querySelector('form');
form.addEventListener('focusin', inputAddClassFunc);
form.addEventListener('focusout', inputRemoveClassFunc);
function inputAddClassFunc(event) {
if (event.target.matches('.inputBox')) {
event.target.previousElementSibling.classList.add('active');
}
}
function inputRemoveClassFunc(event) {
if (event.target.matches('.inputBox')) {
var hasValue = event.target.value;
if (!hasValue) {
event.target.previousElementSibling.classList.remove('active');
}
}
}
.active {
background-color: yellow;
}
<form>
<div class="form-group">
<label for="txtFirstName">Your name</label>
<input id="txtFirstName" name="txtFirstName" type="text" autocomplete="off" class="inputBox" />
</div>
<div class="form-group">
<label for="txtEmail">Email address</label>
<input id="txtEmail" name="txtEmail" type="email" autocomplete="off" class="inputBox" />
</div>
<div class="form-group">
<select id="drpPosition" name="drpPosition">
<option>I would describe my user type as </option>
<option>Web developer </option>
<option>Web designer </option>
</select>
</div>
<div class="form-group">
<label for="txtPassword">Password</label>
<input id="txtPassword" type="password" autocomplete="off" class="inputBox" />
<small>Minimum 8 characters</small>
</div>
<div class="form-group">
<input type="submit" name="btnSubmit" id="btnSubmit" value="Next" />
</div>
</form>
Also note that if you want the txtPassword element to have the inputBox class, you should change
<input id="txtPassword" type="password" class="cool" autocomplete="off" class="inputBox" />
to
<input id="txtPassword" type="password" autocomplete="off" class="inputBox" />
(remove the duplicate cool attribute)

Is there a way to get your JQuery validation to populate onto the document?

For one of my classes we're using JQuery validation. I'm trying to get the answers to populate next to the corresponding text on the bottom that's listed (name, age, date,etc..) on the document below after the user inputs the info in the text box.
<script>
$(document).ready(function() {
$("#input").validate();
$("#input").submit(function(e) {
e.preventDefault(); //Prevents from submitting (which is the default action)
if (!$("#input").valid()) {
return false;
} else {
$("#result").append($("#name").val() + "<br>" + "Your name is");
}
});
});
</script>
<body>
<p><b>Fill out all the fields below and click submit</b></p>
<div>
<label for="name" class="label">Enter your name</label>
<input type="text" name="name" id="name" class="required" title="Please enter your name"> </div><br>
<div>
<label for="thedate" class="label">Enter today's date</label>
<input type="text" name="thedate" id="thedate" class="required date"></div><br>
<div>
<label for="theage" class="label">Enter your age</label>
<input type="text" name="theage" id="theage" class="required digits"></div><br>
<div>
<label for="theurl" class="label">Enter your web site</label>
<input type="text" name="theurl" id="theurl" class="required url"></div><br>
<div>
<label for="theemail" class="label">Enter your email</label>
<input type="text" name="theemail" id="theemail" class="required email"></div><br>
<div>
<input type='submit' value='Submit' name="submit" id='submitme'></div><br>
</form>
<p id="result"></p>
<p><b>Name:</b></p><br>
<p><b>Date: </b></p><br>
<p><b>Age:</b> </p><br>
<p><b>Website: </b></p><br>
<p><b>Email:</b></p><br>
</body>
</html>

QuerySelectorAll identifying all but not adding effect to all

I ve created simple html form and I want to animate the input fields labels using javascript. I used querySellectorAll method to identify the objects and console logged querySelectorAll(object).length to check the value and it logged correctly. But effect only working only for first 4 input fields (.form__row) . Why is that and also in the console shows error
Cannot read property 'value' of null
const FloatLabel = (() => {
// add active class
const handleFocus = e => {
const target = e.target;
target.parentNode.classList.add('active');
};
// remove active class
const handleBlur = e => {
const target = e.target;
if (!target.value.trim()) {
target.parentNode.classList.remove('active');
target.value = '';
}
};
// register events
const bindEvents = element => {
const floatField = element.querySelector('.form__input');
floatField.addEventListener('focus', handleFocus);
floatField.addEventListener('blur', handleBlur);
};
// get DOM elements
const init = () => {
const floatContainers = document.querySelectorAll('.form__row');
console.log(floatContainers);
if (floatContainers.length) {
floatContainers.forEach((element) => {
if (element.querySelector('.form__input').value) {
element.classList.add('active');
}
bindEvents(element);
});
};
}
return {
init: init
};
})();
FloatLabel.init();
<main class="signin">
<form action="" class="form__signin">
<section class="form__section">
<span class="form__section-title">
Account information
</span>
<div class="form__container">
<div class="form__row">
<label for="uname" class="form__label">User name</label>
<input type="text" class="form__input" name="uname" id="uname" required/>
</div>
<div class="form__row">
<label for="email" class="form__label">Email</label>
<input type="email" class="form__input" name="email" id="email" required/>
</div>
<div class="form__row">
<label for="password" class="form__label">Password</label>
<input type="password" class="form__input" name="password" id="password" required/>
</div>
<div class="form__row">
<label for="confirm" class="form__label">Confirm password</label>
<input type="password" class="form__input" name="confirm" id="confirm" required/>
</div>
</div>
</section>
<section class="form__section">
<span class="form__section-title">
Personal information
</span>
<div class="form__container">
<div class="form__row">
<label for="mr" class="form__label-radio">Master</label>
<input type="radio" class="form__input-radio radio--box" name="title" id="mr" value="mr" required />
<label for="ms" class="form__label-radio">Miss</label>
<input type="radio" class="form__input-radio radio--box" name="title" id="ms" value="ms" required />
</div>
<div class="form__row">
<label for="fname" class="form__label">First name</label>
<input type="text" class="form__input" name="fname" id="fname" required/>
</div>
<div class="form__row">
<label for="lname" class="form__label">Last name</label>
<input type="text" class="form__input" name="lname" id="lname" required/>
</div>
<div class="form__row">
<label for="bdate" class="form__label-select-group">Date of birth</label>
<select name="bdate" id="bdate" class="form__input-select"></select>
<select name="bmonth" id="bmonth" class="form__input-select"></select>
<select name="byear" id="byear" class="form__input-select"></select>
</div>
<div class="form__row">
<label for="bdate" class="form__label">Country</label>
<select name="country" id="country" class="form__input-select"></select>
</div>
</div>
</section>
<section class="form__section">
<span class="form__section-title">
Contact information
</span>
<div class="form__container">
<div class="form__row">
<label for="housenonstreet" class="form__label">House no and street no</label>
<input type="text" class="form__input" name="housenonstreet" id="housenonstreet" required/>
</div>
<div class="form__row">
<label for="city" class="form__label">City</label>
<input type="text" class="form__input" name="city" id="city" required/>
</div>
<div class="form__row">
<label for="postal" class="form__label">Postal Code</label>
<input type="text" class="form__input" name="postal" id="postal" required/>
</div>
<div class="form__row">
<select name="ccode" id="ccode" class="form__input-select"></select>
<label for="" class="form__label">Mobile no</label>
<input type="text" class="form__input">
</div>
</div>
</section>
</form>
</main>

You have a form__row that doesn't have a form__input in it.
<div class="form__row">
<label for="mr" class="form__label-radio">Master</label>
<input type="radio" class="form__input-radio radio--box" name="title" id="mr" value="mr" required />
<label for="ms" class="form__label-radio">Miss</label>
<input type="radio" class="form__input-radio radio--box" name="title" id="ms" value="ms" required />
</div>
So you need to check that element.querySelector(".form__input") returns something before trying to use its value.
floatContainers.forEach((element) => {
let input = element.querySelector('.form__input');
if (!input) {
return;
}
if (input.value) {
element.classList.add('active');
}
bindEvents(element);
});
You should have a similar check in bindEvents(). Or you could just change it so that it receives the input as a parameter, rather than the DIV.