We Keep Coding

Requiring at least 2 check boxes be clicked using JavaScript

I am trying to build a form that requires at least two check boxes to be selected. I have tried everything that I could find without any sort of success.
function cb_require() {
let chckbx = document.forms['form_name']['contact'].value;
for (chckbx.length === 1) {
if (i = 0; i < chckbx.length; i++) {
alert('check 2');
return false;
}
}
}
<form method="post" name="form_name" id="form_name" action="mailto:bb#yahoo.com" enctype="text/plain" onsubmit="return cb_require()">
<label for="cont">Preferred Contact Method:</label>
<input type="checkbox" id="Phone" name="contact" value="Phone">
<label for="Phone">Phone</label>
<input type="checkbox" id="E-mail" name="contact" value="E-email">
<label for="E-mail">E-mail</label><br>
<input type="checkbox" id="Mail" name="contact" value="Mail">
<label for="Mail">Mail</label>
<input type="checkbox" id="LinkedIn" name="contact" value="LinkedIn">
<label for="LinkedIn">LinkedIn</label><br><br>
</form>
Thanks in advance for any help or advice!

You can simple use querySelectorAll for filter only checkbox checked, if length is equal to two submit form like:
const form = document.querySelector('#form_name');
form.addEventListener('submit', (e) => {
e.preventDefault();
let chckboxs = form.querySelectorAll('input[type="checkbox"]:checked');
if (chckboxs.length > 1) {
console.log('form submit');
} else {
console.log('error form');
}
});
<form method="post" name="form_name" id="form_name" action="mailto:bb#yahoo.com" enctype="text/plain">
<label for="cont">Preferred Contact Method:</label>
<input type="checkbox" id="Phone" name="contact" value="Phone">
<label for="Phone">Phone</label>
<input type="checkbox" id="E-mail" name="contact" value="E-email">
<label for="E-mail">E-mail</label><br>
<input type="checkbox" id="Mail" name="contact" value="Mail">
<label for="Mail">Mail</label>
<input type="checkbox" id="LinkedIn" name="contact" value="LinkedIn">
<label for="LinkedIn">LinkedIn</label><br><br>
<button type="submit">ClickMe</button>
</form>
Reference:
*.querySelectorAll()

Dynamically Remove a Form Element Based on User Selection in HTML/JavaScript

I am trying to remove the option to upload a file upon the selection of the No radio button but when I click No it doesn't go away. I have no idea what I'm doing when it comes to JavaScript. How do I make it go away (or come back).
<form method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
<input type="submit" value="Submit" /><br>
<label for="fname">First Name:</label>
<input type="text" required /><br>
<label for="lname">Last Name:</label>
<input class="lname" type="text" required/><br>
<label for="email">Email:</label>
<input class="email" type="text" required/><br>
<input type="radio" name="file" value="yes" id="yes" />
<label for="Yes">Yes</label>
<input type="radio" name="file" value="no" id="no" />
<label for="No" "removeElement();">No</label><br>
<p><input type="file" size="30" required></p>
</form>
<script>
function validateForm() {
window.open("https://www.stackoverflow.com");
}
function removeElement(){
var parent = document.getId(file);
parent.removeChild(file);
}
</script>
Any help would be greatly appreciated!

You can't just put removeElement(); in the middle of the html tag.
I'm assuming you want to hide the file tag? You'll first want to remove the required.
You will need to add an event listener on your No.
In jQuery this looks like this
$('#no').change(
function() {
if ($(this).is(':checked') && $(this).val() == 'no') {
$(this).hide(); //Change this for the id of the element you want
}
else {
$(this).show(); //Change this for the id of the element you want
}
});
Partly inspired by this source
If you're looking for pure JavaScript, here's what my solution would look like :
<form method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
<input type="submit" value="Submit" /><br>
<label for="fname">First Name:</label>
<input type="text" required /><br>
<label for="lname">Last Name:</label>
<input class="lname" type="text" required/><br>
<label for="email">Email:</label>
<input class="email" type="text" required/><br>
<input type="radio" name="file" value="yes" id="yes" onclick="handleChange(false);" />
<label for="Yes">Yes</label>
<input type="radio" name="file" value="no" id="no" onclick="handleChange(true);" />
<label for="No">No</label><br>
<p><input type="file" size="30" id="fileUpload"></p>
</form>
<script>
function validateForm() {
window.open("https://www.stackoverflow.com");
}
function handleChange(remove) {
var element = document.getElementById('fileUpload');
if (remove)
element.style.display = 'none';
else
element.style.display = 'block';
}
</script>
(Not tested)

for hide:
document.querySelectorAll('input[type=file]').style.display = 'none';
for show:
document.querySelectorAll('input[type=file]').style.display = 'block'; //or ''

Required Fields and Redirects in JavaScript

I am trying to make it so that when the user clicks the Submit button, they are redirected to another page. Addittionally, if they try submitting without entering their first name, last name, or email, it will return an error saying "This is a required field". For some reason, neither of this are working. Nothing happens when submit is clicked. I am sure it is something simple but I have never worked with these scripts before so I don't know what I am looking for.
Here is the code:
<form method="post" enctype="multipart/form-data">
<button><input type="submit" value="Submit" onclick="submit();"/></button><br>
<label for="fname">First Name:</label>
<input type="text" required/><br>
<label for="lname">Last Name:</label>
<input class="lname" type="text" required/><br>
<label for="email">Email:</label>
<input class="email" type="text" required/><br>
<input type="radio" name="file" value="yes" id="yes" />
<label for="Yes">Yes</label>
<input type="radio" name="file" value="no" id="no" />
<label for="No">No</label><br>
<p><input type="file" size="30" required></p>
</form>
<script>
function submit() {
window.location= "http://stackoverflow.com"
}
</script>
Any help would be greatly appreciated!

Try this:
<form method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
<input type="submit" value="Submit" /><br>
<label for="fname">First Name:</label>
<input type="text" required /><br>
<label for="lname">Last Name:</label>
<input class="lname" type="text" required/><br>
<label for="email">Email:</label>
<input class="email" type="text" required/><br>
<input type="radio" name="file" value="yes" id="yes" />
<label for="Yes">Yes</label>
<input type="radio" name="file" value="no" id="no" />
<label for="No">No</label><br>
<p><input type="file" size="30" required></p>
</form>
<script>
function validateForm() {
window.open("https://www.stackoverflow.com");
}
</script>

Quick way as it looks like your not using ajax.
Remove the onclick from the submit button (require tag is being ignored because of this) along with the JavaScript and return a 302 redirect with the url from the server if it's successful.

radio button change visible input fields

I'm trying to do a separate formulary for individuals and corporations
If the visitor check the "Individual" radio button, it would display a form
If the visitor check the "Corporation" radio button, it would display a different form
<fieldset>
<input type="radio" name="tipo_cadastro" value="individual_form" id="individual_form" style="margin:0px !important">
<strong>Individual Form</strong><br/>
<input type="radio" name="tipo_cadastro" value="corporation_form" id="corporation_form" style="margin:0px !important">
<strong>Corporation Form</strong>
<!-- If Individual Form is checked -->
<legend>Personal Data</legend>
<label for="Name">Full Name</label>
<input id="Name" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
<!-- If Corporation Form is checked -->
<legend>Corporation Data</legend>
<label for="Name">Name</label>
<input id="Name" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
</fieldset>
Ps: Because of my other javascript, I can't use other <fieldset> than the existing one

You'd need to wrap something around the fields to show/hide, even just a <div> tag with an ID.
Then for your radio buttons, you'd want to add onchange & onmouseup event handlers (to account for people either clicking to change the value, or using their keyboard).
eg.
<script type="text/javascript">
function onchange_handler(obj, id) {
var other_id = (id == 'personal')? 'corporate' : 'personal';
if(obj.checked) {
document.getElementById(id + '_form_fields').style.display = 'block';
document.getElementById(other_id + '_form_fields').style.display = 'none';
} else {
document.getElementById(id + '_form_fields').style.display = 'none';
document.getElementById(other_id + '_form_fields').style.display = 'block';
}
}
</script>
<fieldset>
<input type="radio" name="tipo_cadastro" value="individual_form" id="individual_form" style="margin:0px !important" onchange="onchange_handler(this, 'personal');" onmouseup="onchange_handler(this, 'personal');">
<strong>Individual Form</strong><br/>
<input type="radio" name="tipo_cadastro" value="corporation_form" id="corporation_form" style="margin:0px !important" onchange="onchange_handler(this, 'corporate');" onmouseup="onchange_handler(this, 'corporate');">
<strong>Corporation Form</strong>
<!-- If Individual Form is checked -->
<div id="personal_form_fields">
<legend>Personal Data</legend>
<label for="Name">Full Name</label>
<input id="Name" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
</div>
<!-- If Corporation Form is checked -->
<div id="corporate_form_fields" style="display: none;">
<legend>Corporation Data</legend>
<label for="Name">Name</label>
<input id="Name" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
</div>
</fieldset>

Change Data Based on Radio Button

How do I do this in javascript where when a radio button is selected only certain fields show up to type in?? Please show work (preferably with JSFiddle) :)
<form action="inc/add_p_c_validate.php" method="post">
Professor<input type="radio" name="addType" value="Professor" />
Course<input type="radio" name="addType" value="Course" />
<br><br>Name: <input type="text" name="name" /><br>
Department: <select name="deptName"><option>Department 1</option> <option>Department 2</option></select>
Email: <input type="text" name="email" /><br>
<input type="submit" name="submit" />
</form>

set onclick event of your radiobuttons to call a function that will check radiobutton status and then will show or hide elements of your form inside specified div elements.
jsfiddle sample
<script language="javascript">
function ChangeForm()
{
if(document.getElementById('Professor').checked)
document.getElementById('fieldset1').style.display = "inline";
else
document.getElementById('fieldset1').style.display = "none";
if(document.getElementById('Course').checked)
document.getElementById('fieldset2').style.display = "inline";
else
document.getElementById('fieldset2').style.display = "none";
}
</script>
<form action="inc/add_p_c_validate.php" method="post">
Professor<input type="radio" name="group1" onclick="ChangeForm()" id="Professor" name="addType" value="Professor" />
Course<input type="radio" name="group1" onclick="ChangeForm()" name="Course" id="Course" value="Course" />
<br><br>
<div id="fieldset1">Name: <input type="text" name="name" /><br>
Department: <select name="deptName"><option>Department 1</option> <option>Department 2</option></select></div>
<div id="fieldset2">Email: <input type="text" name="email" /><br>
<input type="submit" name="submit" /> </div>
</form>