Develop Reference

How to remove "This field is required." after choosing an option in select?

I'm creating a form and I made a validation so it has a field is required text popping up when you click the submit button.
It works pretty well but, it has 1 problem. When it pops up, and I select an option from the select tag, the field is required text doesn't hide automatically, but when it's an input text and I type something in it, the text hides automatically.
$('#name').on('change', function() {
if (this.value != "") {
this.removeAttribute("required");
this.required = false;
}
});
function Validate(_id) {
$("#form_validation").validate({
rules: rules,
highlight: function(input) {
$(input).parents('.form-line').addClass('error');
},
unhighlight: function(input) {
$(input).parents('.form-line').removeClass('error');
},
errorPlacement: function(error, element) {
$(element).parents('.form-group').append(error);
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group form-float">
<div class="form-line">
<select class="form-control show-tick" name="name" id="name" required>
<option value="" disabled selected hidden="">-- Please select --</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
<div class="form-group form-float" align="center">
<input type="submit" name="insert" class="btn btn-lg large" id="data">
</div>

Have you tried to put the attribute novalidate on the SELECT tag?
Example:
<select class="form-control show-tick" name="name" id="name" required novalidate>

Make sure that you are typing the right selector in this snippet:
$('#elemschool').on('change', function() {
if (this.value != "") {
this.removeAttribute("required");
this.required = false;
}
});
change elemschool to name as the id in the select
<select class="form-control show-tick" name="name" id="name" required>
is equal to name
so basically it will be like below:
$('#name').on('change', function() { // here is the change
if (this.value != "") {
this.removeAttribute("required");
this.required = false;
}
});

Can't keep CSS change via Javascript

I have a simple "select" - show below.
<label>Best way to reach you?</label><br>
<select id="contactMethod">
<option value="wp">Work Phone?</option>
<option value="cp">Personal Cell Phone?</option>
<option value="email">Email?</option>
<option value="Im">Instant Messanger?</option>
</select>
<button onclick="showHidden()">Which way?</button>
the object I wish to show is in the HTML with the following properties:
<label>E-mail Address:</label>
<input id="email" type="text" style='display:none'>
I then have a .js file with the following function.
function showHidden() {
var dropSelection = document.getElementById("contactMethod").value;
console.log(dropSelection)
if(dropSelection == "email") {
document.getElementById("email").style.display = "block";
}
}
I then have the id listed within my CSS as the following:
#email{ display:none; }
The goal is to "show" the email text box when the "email" option is selected from the <select> above.
As of right now, I'm simply printing what was selected, so I can know for sure that I'm getting the right values to run the if statement against. That being said, when I select the email option, it literally flashes the email text box but immediately reverts back to a hidden state.
UPDATED CODE
<label>Best way to reach you?</label><br>
<select onchange="showHidden()" id="contactMethod">
<option value="select">Select...</option>
<option value="email">Email</option>
<option value="phone">Work Phone</option>
<option value="cPhone">Cell Phone</option>
<option value="Im">Instant Messanger</option>
</select>
MODIFIABLE FIELDS
<label id="emailLabel">E-mail Adress:</label>
<input id="email" type="text">
<label id="phoneLabel">Work Phone Number</label>
<input id="phone" type="text">
<label id="cPhoneLabel">Personal Cell Phone Number</label>
<input id="cPhone" type="text">
<label id="IMLabel">Instant Messenger Name</label>
<input id="Im" type="text">
JS
function showHidden() {
var dropSelection = document.getElementById("contactMethod").value;
if(dropSelection == "email") {
document.getElementById("email").style.display = "block";
document.getElementById("emailLabel").style.display = "inline";
}
else if(dropSelection == "phone") {
document.getElementById("phone").style.display = "block";
document.getElementById("phoneLabel").style.display = "inline";
}
else if(dropSelection == "cPhone") {
document.getElementById("cPhone").style.display = "block";
document.getElementById("cPhoneLabel").style.display = "inline";
}
else if(dropSelection == "Im") {
document.getElementById("Im").style.display = "block";
document.getElementById("IMLabel").style.display = "inline";
}
}

function showHidden(){
var dropSelection = document.getElementById("contactMethod").value;
console.log(dropSelection)
if(dropSelection == "email"){
document.getElementById("email").style.display = "block";
}
}
#email{
display:none;
}
<label>Best way to reach you?</label>
<br>
<select id="contactMethod">
<option value="wp">Work Phone?</option>
<option value="cp">Personal Cell Phone?</option>
<option value="email">Email?</option>
<option value="Im">Instant Messanger?</option>
</select>
<br>
<button onclick="showHidden()">Which way?</button>
<br>
<label>E-mail Adress:</label>
<br>
<input id="email" type="text" display="none">
<br>
I don't see any problem, it works fine.

SerializeObject and SerializeArray doesn't show on console.log

My JSFiddle here
I know there has been loads of posts about this here in SO but I'm wondering why these (SerializeObject/Serialize/SerializeArray()) doesn't show on my console.log after onclick.
HTML:
<form action="#" method="post" id="testform" name="testform">
<input class="input_rid" type="text" name="rid" id="rid" value="" placeholder="rid" required>
<input class="input_recipient_id" type="text" name="recipient_id" id="recipient_id" value="" placeholder="recipient_id" required>
<select class="select_eml" name="email_type" id="email_type" required>
<option value="" selected="selected" disabled="disabled">
Email type
</option>
<option value="Body">Body</option>
<option value="Body & Attachment">Body & Attachment</option>
<option value="Link">Link</option>
<option value="Internal Attachment">Internal Attachment</option>
<option value="External Attachment">External Attachment</option>
</select>
<select class="select_tcb" name="to_cc_bcc" id="to_cc_bcc">
<option value="" selected="selected" disabled="disabled">
To_CC_BCC
</option>
<option value="to">To</option>
<option value="cc">CC</option>
<option value="bcc">BCC</option>
</select>
<input class="input_sd" type="date" name="start_dte" id="start_dte" value="" placeholder="start_dte" required>
<input class="input_ed" type="date" name="end_dte" id="end_dte" value="" placeholder="end_dte">
<input class="button small radius right inline" type="button" onclick="return test();" value="Save to Console Log">
</form>
JS:
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
function test() {
var v = $("#testform").serializeObject();
console.log(v);
console.log($("#testform").serialize());
console.log($("#testform").serializeArray());
}

The problem here is that the test function is declared inside a window load scope and when you click on that button the interpreter can't find the invoked function.
To get that example working, move the function declaration outside the $(window).on('load') scope or just declare it globally:
window.test = function() {
var v = $("#testform").serializeObject();
console.log(v);
console.log($("#testform").serialize());
console.log($("#testform").serializeArray());
}

how will i enabled button when two textbox is equal

i tried this codes but it seems not working. my problem is how will i enabled the button when the two textbox is equal the value? the selected textbox is automatic will change depend on the quanity of item selected in multiple select.
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
function getCount(){
var comboBoxes = document.querySelectorAll("#tags");
var selected = [];
for(var i=0,len=comboBoxes.length;i<len;i++){
var combo = comboBoxes[i];
var options = combo.children;
for(var j=0,length=options.length;j<length;j++){
var option = options[j];
if(option.selected){
selected.push(option.text);
}
}
}
$('#selected').val(selected.length);;
}
</script>
<script>
function disableSubmit(){
var firstValue = $("#quantitytotransfer").val();
var secondValue = $("#selected").val();
if ((firstValue == secondValue)) {
$("#submit").attr("disabled", false);
}else{
$("#submit").attr("disabled", true);
}
}
$("#selected").on("keyup", disableSubmit);
$("#quantitytotransfer").on("keyup", disableSubmit);
</script>
<input name="imei" placeholder="quantity" id="quantitytotransfer">
<input name="numberselected" readonly id="selected">
<select id="tags" onchange="getCount()"multiple style="width: 200px;">
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
</select>
<button id="submit" id="submit" disabled type="button">Get Values</button>
<script>
</script>

It's very easy here is the code
<input name="imei" placeholder="quantity" id="quantitytotransfer">
<input name="numberselected" readonly id="selected">
<select id="tags" multiple style="width: 200px;">
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
</select>
<button id="submit" disabled type="button">Get Values</button>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
$(function() {
$("#tags").on("change", function(e) {//Whenever tags are changed it will be called
$('#selected').val($(this).find('option').filter(":selected").length);//this will set the count or length of selected length
$("#submit").prop("disabled", !$("#quantitytotransfer").val() || !$("#selected").val() || ($("#quantitytotransfer").val() != $("#selected").val()));//this will disable or enable depending on equal value
});
var delay = (function() {// a delay function
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
$('#quantitytotransfer, #selected').keyup(function() {//both text box are binded to event
delay(function() {
$("#submit").prop("disabled", !$("#quantitytotransfer").val() || !$("#selected").val() || ($("#quantitytotransfer").val() != $("#selected").val()));//this will disable or enable depending on equal value
}, 1000 );//a 1 second delay used you can change to more less
});
});

You can compare value entered in input tag and selected from select tag in the following way:
Here how does it work:
Listen to input on input.
Listen to change on select tag.
When user enter a value in input, run logic enable button.
When user select a value in select, run logic enable button.
Logic enable button, compare value entered and selected from input and select tag. If both values match, button is enabled otherwise is disabled.
When a value change on select tag, show value in read-only input tag/
(function() {
var elmQuantity = $('#quantitytotransfer'),
elmTags = $('#tags'),
elmSubmit = $('#submit'),
elmSelected = $('#selected'),
findTagsSelected = function() {
return elmTags.find(':selected').text();
},
enableBtn = function() {
if (elmQuantity.val() === findTagsSelected()) {
elmSubmit.prop('disabled', false)
} else {
elmSubmit.prop('disabled', true)
}
};
elmQuantity.on('input', function() {
enableBtn();
}),
elmTags.change(function(value) {
enableBtn();
elmSelected.val(findTagsSelected());
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="imei" placeholder="quantity" id="quantitytotransfer">
<input name="numberselected" readonly id="selected">
<select id="tags" multiple style="width: 200px;">
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
</select>
<button id="submit" id="submit" disabled type="button">Get Values</button>

Javascript Form validation not working for select element

So I'm trying to change a select box's style if the value is not changed ie. the user has not selected anything. That yesnoCheck is a function which shows an additional input field if the choice "other" is selected. I don't think it affects this form validation though. This same kind of validation works fine with an input field but it won't work with a select box.
I've also treid selectedIndex == 0 but it doesn't work either.
HTML:
<form name="myForm" method="post" action="" onsubmit="return(validate());">
<label for="lastname">Sukunimesi:</label>
<input type="text" id="lastname" name="lastname" /><br />
<select id="car" name="car" onchange="javascript:yesnoCheck()">
<option id="noCheck" value="none">Valitse automerkkisi</option>
<option id="noCheck" value="1">Lada</option>
<option id="noCheck" value="2">Mosse</option>
<option id="noCheck" value="3">Volga</option>
<option id="noCheck" value="4">Vartburg</option>
<option id="yesCheck" value="other">Muu</option>
</select>
<input type="submit" value="Submit" />
</form>
JS:
<script type="text/javascript">
function yesnoCheck() {
if (document.getElementById("yesCheck").selected) {
document.getElementById("ifYes").style.display = "block";
}
else document.getElementById("ifYes").style.display = "none";
}
function validate() {
if (document.myForm.lastname.value.length < 3) {
document.getElementById("lastname").className = "required";
return false;
}
if (document.myForm.car.value == "none") {
document.getElementById("car").className = "required";
return false;
}
alert ("Everything is fine!");
}
</script>

Your code works check your form name and make sure your form exists before the script is run.
function check(){
if (document.myForm.car.value == "none") {
document.getElementById("car").style.border = "1px solid #900";
document.getElementById("car").style.backgroundColor = "#ff9";
return false;
}
}
<form name="myForm">
<select id="car" name="car" onchange="javascript:yesnoCheck()">
<option id="noCheck" value="none">Valitse automerkkisi</option>
<option id="noCheck" value="1">Lada</option>
<option id="noCheck" value="2">Mosse</option>
<option id="noCheck" value="3">Volga</option>
<option id="noCheck" value="4">Vartburg</option>
<option id="yesCheck" value="other">Muu</option>
</select>
</form>
<button onclick="check()">Run script</button>

So the solution was to delete return false; from the function.