Develop Reference

Validate each input field Bootstrap form using javascript without hitting the submit button

I m new to JS, I have the below form I need javascript code to validate each field without clicking on submit button. Thanks in Advance
I m new to JS, I have the below form I need javascript code to validate each field without clicking on submit button. Thanks in Advance
<form action="" id = "form1"class = "form-group row">
<table class = "form-table">
<tr>
<td class = "col-sm-2 col-form-label">Name:</td>
<td><input type="text" class="form-control" id="name" placeholder="Name" value="" required="required" data-error="Please enter your full name.">
<div class="help-block with-errors"></div></td>
</tr>
<tr>
<td label for="email" class="col-sm-2 col-form-label" >Email:</td>
<td><input type="email" class="form-control" id="inputEmail3" placeholder="name#example.com" required="required">
</tr>
<tr>
<td label for="inputPhone3" class="col-sm-2 col-form-label">Phone:</td>
<td><input type="number" class="form-control" required="required" id="phone" placeholder="Phone"></td>
</tr>
<tr>
<td class = "sel1">Reason for Inquiry:</td>
<td><select class="form-control" required="required" id="sel1">
<option value="catering">Catering</option>
<option value="privateparty">Private party</option>
<option value="feedback">Feedback</option>
<option value="other">other</option>
</select>
</td>
</tr>
<tr>
<td class = "form-group">Additional Information:</td>
<td><textarea class="form-control" rows="5" id="comment"></textarea></td>
</tr>
<tr>
<td>Have you been to resturant:</td>
<td> <input type="radio" required="required" name="optradio"> Yes
<input type="radio" name="optradio"> No</td>
</tr>
<tr>
<td class = "form-check-input"> Best days to contact you:</td>
<td><input type="checkbox" required="required" name="m">M
<input class="form-check-input" type="checkbox" name="t">T
<input class="form-check-input" type="checkbox" type="checkbox" name="W">W
<input class="form-check-input" type="checkbox" type="checkbox" name="Th">Th
<input class="form-check-input" type="checkbox" type="checkbox" name="F">F</td>
</tr>
<tr>
<td></td>
<td><button class="btn btn-primary">Submit Request</button></td>
</tr>
</table>
</form>

You can use change event on your form to perform validation after any field changes with this script:
var form = document.forms.form1;
form.addEventListener('change', function() {
alert('Changed');
// Add your validation code here
});
Check the working example here
This is an example of very simple validation for name and e-mail fields, just to give you an idea how to implement it. We can add new element <div id="error-message" />, and use it to display found errors from the script:
var form = document.forms.form1;
form.addEventListener('change', function() {
document.querySelector('#error-message').innerHTML = '';
// Validate Name
const input_name = document.querySelector('#name').value;
if (input_name == "") {
document.querySelector('#error-message').innerHTML += "Name is missing<br>";
}
// Validate Email
const input_email = document.querySelector('#inputEmail3').value;
if (input_email == "") {
document.querySelector('#error-message').innerHTML += "Email is missing<br>";
}
});
Of course, you would need to implement better validation than this and decide how to display messages, but basic working example is here

Javascript: How do I make an input/text field mandatory(required) when the radio button assigned to it is checked/selected?

How do I make an input/text field mandatory(required) when the radio button assigned to it is checked/selected?
I need an input field to become mandatory once the corresponding radio button is selected:
Radio Button 1 Text Field 1
Radio Button 2 Text Field 2
Radio Button 3 Text Field 3
So if Radio button 1 is selected, I need Text Field 1 to become mandatory. If Radio button 2 is selected, I need Text Field 2 to become mandatory and so on.
See the actual code below:
Please confirm your identity by selecting/using one of the below Government issued identification. Upon selecting an identity type, please fill in the text field next to it.
<TR>
<TD width="253"><input type="radio" required name="IdentityType" id="IdentityType" value="Australian driver's licence number">
<label for="IdentityType">**Australian driver's licence number:**</label>
</TD>
<TD width="672">
<span id="sprytextfield1">
<input name="IdentityValue" type="text" id="IdentityValue" value="" />
</span>
</TD>
</TR>
<TR>
<TD style="text-indent:22px">
<label for="IdentityType">**Issue state or territory:**</label>
</TD>
<TD>
<input name="IdentityValue" type="text" id="IdentityValue" value="" />
</TD>
</TR>
<TR>
<TD>
<input type="radio" required name="IdentityType" id="IdentityType" value="Australian passport number">
<label for="IdentityType">**Australian passport number:**</label>
</TD>
<TD>
<input name="IdentityValue" type="text" id="IdentityValue" value="" />
</TD>
</TR>
<TR>
<TD>
<input type="radio" required name="IdentityType" id="IdentityType" value="Immicard number">
<label for="IdentityType">**Immicard number:** </label>
</TD>
</TR>

Let's pretend you have HTML like this
<input type="radio" id="radio1" />
<input type="textbox" value="t1"/>
<script>
if(document.getElementById('radio1').checked) {
document.getElementById("t1").required = true;
}else {
document.getElementById("t1").required = false;
}</script>

Multiple text fields can't seem to enable them with a radio button

Other than following somebody else example and trying to suit it to my needs I know zero javascript. That's why this is such a hard fight for me else I'd just do it in PHP but PHP can't interact with elements in the document. =(
I recreated my problem in a jsfiddle --> http://jsfiddle.net/Handler/baz19g8y/
All my select and input fields have the same class name. And then based up on which radio button is selected the all the fields become editable.
Here's the HTML:
<form action="" method='post'>
<table class="mgmtchg">
<tr>
<th>Management Role</th>
<th>Name</th>
<th>Email address</th>
<th>Phone</th>
<th> Update</th>
<th> Delete</th>
</tr>
<tr>
<td class="mgmttd">
<select name="mgmt-role-0" class="mgmt-0 form-field role-drop" disabled>
<option value="mgmt0" selected>Head Coach</option>
<option value="mgmt1">Assistance Coach</option>
<option value="mgmt2">Team Manager</option>
</select>
</td>
<td class="mgmttd">
<input type="hidden" name="mgmt-id-0" value="25" />
<input type="hidden" name="team-id-0" value="11" />
<input type="text" name="mgmt-name-0" class="mgmt-0 form-field mgmt-name-field" disabled value="Ed Frederickson" />
</td>
<td class="mgmttd">
<input type="text" name="email-0" class="mgmt-0 form-field mgmt-email-field" disabled value="tealfred#sbcglobal.net" />
</td>
<td class="mgmttd">
<input type="text" name="phone-0" class="mgmt-0 form-field mgmt-phone-field" disabled value="317-987-3095" />
</td>
<td class="mgmttd">
<div class="chgradio">
<input type="radio" name="utype0" value="upd-0" id="mgmtupdate-0" class="css-radiobox">
<label for="mgmtupdate-0" class="css-label radGroup2"></label>
</div>
</td>
<td class="mgmttd">
<div class="chgradio">
<input type="radio" name="utype0" value="del-0" id="mgmtdelete-0" class="css-radiobox">
<label for="mgmtdelete-0" class="css-label radGroup2"></label>
</div>
</td>
</tr>
</table>
</form>
And this is the javascript I'm attempting to use which of course can be found in the jsfiddle link in the beginning of this post:
document.getElementById('mgmtupdate-0').onchange = displayTextBox;
document.getElementById('mgmtdelete-0').onchange = displayTextBox;
var textBox = document.getElementsByClassName('mgmt-0');
function displayTextBox(evt) {
console.log(evt.target.value)
if (evt.target.value == "upd-0") {
textBox.disabled = false;
} else {
textBox.disabled = true;
}
}
I'd like to learn javascript but it seems so intimidating and overly wordy!
I hope somebody can help!
Thanks so much in advance!

getElementsByClassName returns a collection. textBox.disabled is not a function of the collection. you'd rather loop through the collection:
textboxes = document.getElementsByClassName('mgmt-0');
for(var i=0; i< textboxes.length; i++) {
textboxes[i].removeAttribute("disabled")
}

Input boxes disable/enable box when there is form specified

I'm trying to get form in table with enabling and disabling inputs by checkbox.
When I realized, that <form> is not working in tables I put form argument in inputs, but now disabling/enabling doesn't working (my js skill is kinda poor)
My checkbox to disable/enable inputs look like:
<td>
<input type="checkbox" onclick="this.form.elements['bleh'].disabled = this.form.elements['bleh2'].disabled = !this.checked" />
<input type="submit" value="Edytuj"/>
</td>
And my input boxes for now are:
<td><input type="text" name="bleh" form="id7" value="default" disabled=disabled></td>
<td><input type="text" name="bleh2" form="id7" value="admin" disabled=disabled></td>

if you give your form a name you can reach the elements like this:
document.FORM_NAME.ELEMENT_NAME.disable
Eg
document.id7.bleh.disabled
So you can change your onclick to
<input type="checkbox" onclick="document.id7.bleh.disabled = document.id7.bleh2.disabled = !this.checked" />
Example
Using form attribute to external form

Demo Fiddle
When you have your table within the form
<form action="#">
<table>
<tr>
<td>
<input type="text" name="bleh" value="default" disabled="disabled" />
</td>
<td>
<input type="text" name="bleh2" value="admin" disabled="disabled" />
</td>
<td>
<input type="checkbox" onclick="this.form['bleh'].disabled = this.form['bleh2'].disabled = !this.checked" />
<input type="submit" value="Edytuj" />
</td>
</tr>
</table>
</form>
When you declare your form elements outside the form
<table>
<tr>
<td>
<input type="text" name="bleh" form="id7" value="default" disabled="disabled" />
</td>
<td>
<input type="text" name="bleh2" form="id7" value="admin" disabled="disabled" />
</td>
<td>
<input type="checkbox" onclick="document.forms['id7']['bleh'].disabled = document.forms['id7']['bleh2'].disabled = !this.checked" />
<input type="submit" value="Edytuj" />
</td>
</tr>
</table>
<form name="id7" id="id7" action="#"></form>

How to disable textboxs in radio button with Javascript

My function is
If I choose the first (second or last) option, the rest option will be disabled and reset as null and all values in the selected option will be enabled as my Javascript below.
Moreover, I would like to disable textboxs as the left-hand side below whenever the taxi option has been selected.
Demo
HTML:
<table>
<tr>
<td>
<input type="radio" name="vehicle" value="company_vehicle" />Company Vehicle</td>
</tr>
<tr class="set_width" id="company_vehicle">
<td>
<input type="text" />
</td>
<td>
<input type="checkbox" />Company Vehicle</td>
</tr>
<tr>
<td>
<input type="radio" name="vehicle" value="hiring_vehicle" />Hiring Vehicle</td>
</tr>
<tr class="set_width" id="hiring_vehicle">
<td>
<input type="text" />
</td>
<td>
<input type="radio" name="abc" value="car" />Car</td>
<td>
<input type="radio" name="abc" value="bus" />Bus</td>
</tr>
<tr>
<td>
<input type="radio" name="vehicle" value="taxi" />Taxi</td>
</tr>
<tr class="set_width" id="taxi">
<td>
<input type="checkbox" />Taxi</td>
</tr>
</table>
Javascript:
var rbt_vehicle = $("input[name=vehicle]");
$(rbt_vehicle).on('change', function (e) {
var valueSelected = this.value;
$('#' + valueSelected).find(':text').prop('disabled', false).val('').removeClass('readonly').closest('tr').siblings('tr.set_width').find(':text').prop('disabled', true).addClass('readonly');
$('#' + valueSelected).find(':checkbox,:radio').prop('disabled', false).closest('tr').siblings('tr.set_width').find(':checkbox,:radio').prop('disabled', true);
});

do like this:
$('input.rdo').click(function(){
if(this.id == 'rdoTaxi')
{
$('.textbox').prop('disabled',true);
}
else
{
$('.textbox').prop('disabled',false);
}
});
Fiddle DEMO

Using your current function, you can actually remove a lot of the current code and just do the following:
var rbt_vehicle = $("input[name=vehicle]");
$(rbt_vehicle).on('change', function (e) {
var valueSelected = this.value;
// your other code here ...
$('input[type="text"]').prop('disabled', valueSelected === 'taxi');
});
DEMO