We Keep Coding

How to check if there is no validation error exist in webpage using jquery?

I am trying to check if all form fields are filled on click a button & if valid then i am trying to add a check an alert using jquery.
jQuery("button#btn_place_order").click(function(event){
jQuery("form").validate({
submitHandler: function(form) {
alert('ok');
}
});
});
This is what i have tried but its not working, i just want to check if all fields are ok valid & filled & there is no form related error then just console or alert to check. Webpage has two or more html forms. Is their any way we can check using jquery ?
Thanks

First of you will have to prevent the default behavior of a form submit. Afterwards add a event listener to your button and check for validation of each input. (whatever that means for you). Is this what you wanted?
var el = document.getElementById("form");
el.addEventListener("submit", function(event) {
event.preventDefault();
}, true);
document.getElementById("btn").addEventListener("click", validate);
function validate(){
let valid = true;
[...document.getElementById("form").elements].forEach((input) => {
if(input.value.length == 0){
valid = false;
}
});
if(valid) alert("valid");
}
<form id="form">
<input type="text" name="TEST" id="test">
</form>
<button class="button" name="Send" value="Send" id="btn">Check</button>

How to show div after Submit is complet instead click button?

I have a contact form with many field forms. The form sends an e-mail, and I'd like to show a div (the div has css atributes display none, visible hidden) after the submit is complet.
When I use onClick, the div appear if I click a button with all empty forms.
Any help?
My JavaScript function:
$(document).ready(function () {
$('.ipva_form_calculation').submit(function(event){
$('.ipva_result').show();
return false;
});
});
My HTML form:
<form action="http://localhost/pedespachante/" method="post" class="avia_ajax_form av-form-labels-hidden avia-builder-el-4 el_after_av_heading avia-builder-el-last ipva_form_calculation av-centered-form av-custom-form-color av-light-form" data-avia-form-id="1" data-avia-redirect="" style="display: none;">...</form>

Use jQuery submit() handler instead: https://api.jquery.com/submit/
$('#myForm').submit(function(event) {
//do some form validations
$(this).find('input[type="text"]').each(function() {
if ($(this).val() == '') {
//one or more fields is empty, hence stop here
return false;
}
});
$('.div').show();
});

Use submit event of JQuery
$('#ur_form_id').submit(function(e) {
$('.div_class_name').show();
});

here is form
<form action="http://localhost/pedespachante/" method="post" id="form_id">
<input type="text" name="contact" />
<div class="error" style="display:none;">Please Fill Contact</div>
</form>
here is jquery
$('#form_id').submit(function() {
$(this).find('input[type="text"]').each(function() {
if ($(this).val() == '') {
//one or more fields is empty, hence stop here
return false;
}
});
$('.error').show();
});
Hope its work for you!

How can I run a script when 1 of my 2 submit buttons within 1 form is clicked?

Hi I have 2 submit buttons within one form. The script below works to help prevent empty fields from being submitted by sending an alert msg to the user. However I only need it to run with one of my two submit buttons is clicked. So in other words if one button a if clicked it would submit the form with or without blank fields, and the other button would run the script below and not allow the form to be submitted with blank fields. Any help is greatly appreciated, Thanks.
<script type="text/javascript">
$('form').on('submit', function () {
var thisForm = $(this);
var thisAlert = thisForm.data('alert');
var canSubmit = true;
thisForm.find('[data-alert]').each(function(i) {
var thisInput = $(this);
if ( !$.trim(thisInput.val()) ) {
thisAlert += '\n' + thisInput.data('alert');
canSubmit = false;
};
});
if( !canSubmit ) {
alert( thisAlert );
return false;
}
});
</script>

Instead of wiring up to the form submit event, wire up to the click event of the button that you want to validate with. Returning true from a click event will allow the submit to occur, and false will block it.

You have one form and two submit buttons which, by default, will both submit the form. To prevent one button from submitting, add a click handler that both prevents the default submit action and does whatever else you want that button to do.
HTML
<form id="form">
<input type="text" value="something" />
<input id="submit1" type="submit" value="send" />
<input id="submit2" type="submit" value="ignore" />
</form>
JavaScript
$('#submit2').on('click', function (event) {
event.preventDefault();
// Form will not be submitted
// Do whatever you need to do when this button is clicked
});
$('form').on('submit', function () {
var thisForm = $(this);
var thisAlert = thisForm.data('alert');
var canSubmit = true;
thisForm.find('[data-alert]').each(function(i) {
var thisInput = $(this);
if ( !$.trim(thisInput.val()) ) {
thisAlert += '\n' + thisInput.data('alert');
canSubmit = false;
};
});
if( !canSubmit ) {
alert( thisAlert );
return false;
}
});
Demo https://jsfiddle.net/BenjaminRay/dqqfLxav/

You may try adding the click event and adding classes to the submit buttons. So you know which button click will submit the form accordingly.
$('form button').click(function(){
if($(this).hasClass('.submit-without-validation')) {
$('form').submit();
}
if($(this).hasClass('.submit-with-validation')) {
//Do your validation and then submit
}
});

There are so many answered that you can use to achieve what you want. And you can try this one also. Here is some explanation. Basically, you need can use html5 data attribute to set the value to differentiate both button. When the button was clicked, you can check the value using condition as following code :
HTML
<form>
<input type="text" value="" id="name"/>
<input type="submit" class="btn_submit" value="Submit validate" data-valid="yes"/>
<input type="submit" class="btn_submit" value="Submit without validate" data-valid="no"/>
</form>
JS
$(document).on('click', '.btn_submit', function(e){
e.preventDefault();
var data_valid = $(this).data('valid');
if(data_valid == "yes")
{
// doing your stuff here for validation like example below
var input = $('#name').val();
if(input=="")
{
alert('required');
return;
}
// After the validation process finish, submit the form
$('form').submit();
}
else
{
// submit without validation
$('form').submit();
}
});

Display Alert if Checkbox is unchecked and text field is not empty

I have this form when information is being store into DB. I have a checkbox and a text field. Either one are required, but if the text field isn't empty, there's a good chance the checkbox should be checked. So I'd like to display an Alert if the Text Field has a value in it, and the checkbox isn't checked. I'd like this alert to appear when hitting the Submit button. Here's my form:
<form id="form" name="form" action=?post=yes" method "post">
<input type="checkbox" name="close" id="close" value="Yes"><label for="close" title="Close this RMA">Close this RMA</label>
<label><input type="text" name="dateshipped" id="dateshipped"/></label>
<button type="submit">Save and Continue</button>
</form>
So if checkbox "close" IS NOT checked AND "dateshipped" IS NOT NULL, then display alert when click Submit.
Thank you.

you can do a javascript function to be called on the onclick event in the submit button , like this
<button type="submit" onclick="callAfunction();">Save and Continue</button>
and define the function
callAfunction()
{
//do the checks with: document.getElementById('close').value
// display an alert("a message");
}

Would something like this work?
onsubmit="return validate();" // add to your form tag
function validate() {
checkbox = document.getElementById('myCheckbox').value;
if (!checkbox) {
alert('checkbox is empty');
return false;
} else {
return true;
}
}

Something like this perhaps?
Button for submitting. It runs validateSubmit. It only submits if the function is true.
<input type="button" value="submit" onsubmit="return validateSubmit();" />
Here's the validate function. It gets the value of the checkbox and the text. If they're both falsy then it sets valid to a confirm box. The confirm box allows the user to select ok or cancel and returns true or false based on that.
function validate() {
var valid = true;
var checkbox = document.getElementById('checkboxID').value;
var text = document.getElementById('textBox').value;
if(!(checkbox || text))
valid = confirm("Checkbox and text are empty. \n Continue?");
return valid;
}
The condition could be written as (!checkbox && !text), however I find it simpler to read to only use one ! if I can. The rule is called De Morgan's law if you're interested.
If you're using jQuery, things become easier.
var checkbox = $('#checkboxID').prop( "checked" );
var text =$('#textBox').val();
Plus you can attach even handlers like this:
$(document).ready(function() {
$('#btnSubmit').on('click', validate);
});
Let me know if you have any questions.

** Following code working for me, At first you need to add a onclick="functionName();" then do the following code**
function myCkFunction() {
var checkBox = document.getElementById("close");
if (checkBox.checked == true){
alert('checked');
} else {
alert('Unchecked');
}
}

Clear an input field after submission using JavaScript

I am a JavaScript newbie. I have an input text field that I wish to clear after pressing the form submit button. How would I do that?

In your FORM element, you need to override the onsubmit event with a JavaScript function and return true.
<script type="text/javascript">
function onFormSubmit ()
{
document.myform.someInput.value = "";
return true; // allow form submission to continue
}
</script>
<form name="myform" method="post" action="someaction.php" onsubmit="return onFormSubmit()">
<!-- form elements -->
</form>

If a user presses the submitbutton on a form the data will be submitted to the script given in the action attribute of the form. This means that the user navigates away from the site. After a refresh (assuming that the action of the form is the same as the source) the input field will be empty (given that it was empty in the first place).
If you are submitting the data through javascript and are not reloading the page, make sure that you execute Nick's code after you've submitted the data.
Hope this is clear (although I doubt it, my English is quite bad sometimes)..

function testSubmit()
{
var x = document.forms["myForm"]["input1"];
var y = document.forms["myForm"]["input2"];
if (x.value === "")
{
alert('plz fill!!');
return false;
}
if(y.value === "")
{
alert('plz fill the!!');
return false;
}
return true;
}
function submitForm()
{
if (testSubmit())
{
document.forms["myForm"].submit(); //first submit
document.forms["myForm"].reset(); //and then reset the form values
}
}
First Name: <input type="text" name="input1"/>
<br/>
Last Name: <input type="text" name="input2"/>
<br/>
<input type="button" value="Submit" onclick="submitForm()"/>
</form>

After successfully submitting or updating form or password you can put empty value.
CurrentPasswordcontroller.state.confirmPassword = '';