How to validate a input field connected to a checkbox - javascript

My problem is I want to save data with details of user then check a checkbox which has individual input fields. I want to check if the input field under the checkbox is not empty. If not, then the form will submit the details and value of the input field under the checkbox.
This is the sample validation of details of the user.
if(fname==""){
$('#fname').removeClass('border-success');
$('#fname').addClass('border-danger');
return false;
}
else if(region=="-Select-"){
Swal.fire('Select', "Please select a region",'warning');
return false;
}
else if(province=="-Select-"){
Swal.fire('Select', "Please select a province",'warning');
return false;
}
This is what i try to check if the input field is not empty under the selected checkbox
if($('#box1').is(':checked')){
try{
for(var j=0;j<pnCN.length;j++)
if ($(pnCN[j]).val()==""||$(qCN[j]).val()=="")throw 'Empty field';
}
catch(err){
Swal.fire('Warning', "Empty Field",'warning');
}
}
What's happening is it catches the error but its not preventing the submit btn to send the details of user to the database. If I do if else it will check all the input field that is not checked or selected.
What I want to do is if user selected a specific category on a checkbox then the user entered data to the input field under the checkbox will be save because it is checked. Also I want to check first if that specific field under the checkbox is not empty. Then save the data together to the database.

Related

Validate form selection option custom input base on product type EDIT

So I think my last question wasn't cleared. Currently I am doing form validation for my project. I have form input with main field of "sku", "name", and "price", with custom select options of product type which have three products(Book, dvd, furniture) each product type has an input area base on the product selected, for example:
[enter image description here][1]
I am able to validate name, price, sku, and select option for errors. I can also console.log product type base on the value selected. The only problem is, I can't stop the form to submit even if my select option have empty input field. I can validate the error of that field only when user type something that is not of corrected value but if user select the option and the field is blank, submit field still able to submit. How would I write a condition that stop submission when the selected input form is blank? Example: "If productType is book, and that book value weight is empty, throw error: weight is needed, else submit.
function for handle submission:
This field validate if there's an error, main form is empty, and if option not selected.
const handleSubmit = (event) => {
event.preventDefault();
if (
Object.keys(errors).length === 0 &&
Object.keys(formValues).length !== 0 &&
select !== ""
)
try placing the 'required' straight after the "<select required"

checkbox is checked when text field is empty JS in FormAssembly

I work with FormAssembly and I have a form where I need to check if user is exist. So, the logic is: if text field with error is empty => checkbox should be checked.
I have tried this code:
// tfa_808 is error message field
//tfa_817 is checkbox
function exist(){
if (document.getElementById("tfa_808") == "") {
document.getElementById("tfa_817").checked = true;
}
}
Any help would be appreciated!
Thank you!

Form validation causing wrong input in database from form field

I'm using a javascript that validates a form by radio buttons being checked, depending on which button is checked I want a value for that button submitted to MySQL but when I select a button it submits the button name to MySQL. changing the name of the button causes the script to stop working. How can I change the script so it allows the button value to post to MySQL instead of the button name?
jsFiddle
function ValidateForm(form) {
ErrorText = "";
if ((form.job_status[0].checked === false) && (form.job_status[1].checked === false)) {
alert("Before you can get a signature you must mark a selection.\n Is the work completed or do you need to return?");
return false;
}
if (ErrorText = "") {
form.submit();
}
}
job_status[0] ,job_status[1] means with name job_status two radio buttons exist.
If you change one of the radio buttons name either of job_status[0] job_status[1] one will exist.So you are getting exception
Instead of doing all that process by default select a radio button.That solves all your problems.I updated the link
see here

Javascript Loop through Validation Form

I need help creating a javascript loop for an object that I am validating. The validation works, it displays the alert, but it does not focus on the field. The reason it will not focus on the field is because that field's id is unique each time the user adds another account. The code is below:
if ((theForm.LinkedAccts.value == "Yes")&&
(document.getElementById('DLAccount').selectedIndex == ""))
{
alert("Please enter the Delink Account number.");
document.getElementById('DLAccount').focus();
return (false);
}
Thanks!

How to dynamically keep input field empty when select box option is no?

Ì have form where writing on input field autofills other input field while user types email
$("#edit-submitted-yhteystiedot-sahkoposti").keyup(function(){
$("#edit-submitted-saannot-newsletter-newsletter-email-address").val(this.value);
});
The thing is that if user does not want to receive newsletter and chooses no option for select box, the Input field with ID #edit-submitted-saannot-newsletter-newsletter-email-address should remain empty, even if user makes changes to default email field. ID of SELECT is #edit-submitted-saannot-haluan-uutiskirjeen
var $select = $('#edit-submitted-saannot-haluan-uutiskirjeen'),
$emailInput = $("#edit-submitted-saannot-newsletter-newsletter-email-address");
$select.change(function(){
if($select.val() == 'No')
$emailInput.val('');
}):
$emailInput.keyup(function(){
if($select.val() == 'No')
$emailInput.val('');
});
When the user changes the select to "no" reset the email field and set a custom attribute to know that you don't want automatic updates
$("#edit-submitted-saannot-newsletter-newsletter-email-address").val(this.value).attr("noautoupdate", true);
Then change your code like this
$("#edit-submitted-yhteystiedot-sahkoposti").keyup(function(){
if (!$(this).attr("noautoupdate")) $("#edit-submitted-saannot-newsletter-newsletter-email-address").val(this.value);
});
If the user changes the select to "yes" make the attribute false:
$("#edit-submitted-saannot-newsletter-newsletter-email-address").val(this.value).attr("noautoupdate", false);

Categories