We Keep Coding

How to validate HTML elements when submitting through JQuery?

I have an HTML form as shown below with some form fields and a submit and a delete button:
There is also a floating component which appears whenever there are changes in the form as shown in the same diagram with text: You have unsaved changes. This is a common component which appears for all the forms in my website.
When I submit the form using the form's Submit button, it validates all the fields as per the validations.
(for example: <input type="number" min="0"> will check that the number should be positive)
But if I submit the form from the Save button on the floating element, it does not checks for any validation, and just posts the request.
I tried using the following code, but the reportValidity() function doesn't do anything.
if (!form.checkValidity()) {
form.reportValidity();
}
form.checkValidity() and form.reportValidity() both are returning false when I do a console.log.
What am I missing here, and how can I fix this?
P.S. I tried this on chrome v98.
Edit: Adding HTML code:
<form method="post" action="/products/manage/{{.Product.ID}}/submit/">
<div class="form-group col-md-5">
<label>Product Quantity</label>
<input type="number" min="0" name="ProductQuantity" value="{{if .Product}}{{.Product.Qunatity}}{{else}}10{{end}}">
</div>
<button type="submit" class="btn btn-success" value="Submit">Submit</button>
<button type="submit" class="btn btn-danger" value="Delete" formaction="/products/manage/{{.Product.ID}}/delete/">Delete</button>
</form>
Save button calls this function:
function submitForm(form, url) {
const form = $(form)[0]
if (!form.checkValidity()) { //<- Added the code here
form.reportValidity();
}
var serialized = serializeForm(form);
// Do some more things then use HTTP to request the API
}

You can easily use the jQuery event handlers do the work for you.
A simplified example below:
Give your form some identifier (example: id="form1")
Catch the click event on button click
Trigger the submit event to submit that form
$('.unsavedChangesBtn').on('click',function(){
$('#form1').submit();
});
In below example you can submit the form either by clicking the submit button or the save button.
$('document').ready(function(){
$('#form1').on('submit',function(){
alert("SUBMITTED");
});
$('.unsavedChangesBtn').on('click',function(){
$('#form1').submit();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="form1" action="javascript:void(0);">
<div class="form-group col-md-5">
<label>Product Quantity</label>
<input type="number" min="0" name="ProductQuantity" value="{{if .Product}}{{.Product.Qunatity}}{{else}}10{{end}}">
</div>
<button type="submit" class="btn btn-success" value="Submit">Submit</button>
<button type="submit" class="btn btn-danger" value="Delete" formaction="/products/manage/{{.Product.ID}}/delete/">Delete</button>
</form>
<button class="unsavedChangesBtn"> SAVE </button>

get value of form with submit without refreshing the page

I will explain my problem: I have a form and I want to click on submit to display a div (in the same page) and run a java script function without refreshing the page
<form action="#" method="post" name= "form1" id = "form1">
<div class="row_ligne">
<div class="col-25">
<label for="fname">Fréquence </label>
</div>
<div class="col-75">
<select id="frequence" name="frequence" onchange="showDiv(this)">
<option value="yearly">Annuelle</option>
<option value="monthly">Mensuelle</option>
<option value="daily">Quotidienne</option>
</select>
</div>
</div>
<div class="row_ligne">
<div class="col-50">
<input type="submit" id="Backtest" value ="Backtest" name =
"Backtest" onclick ="open_div_res(),openOnglet(event, 'repartition');" >
</div>
</div>
</form>
<div class="tab_back" id ="id_div_res" style="display:none;">
<button class="tablinks"
onclick="openOnglet(event,'repartition')">Result</button> </div>
<script>
function open_div_res(){
document.getElementById("id_div_res").style.display = "block";
document.getElementById('id_div_res').scrollIntoView();
}
</script>

Add type="button" to the button, you don't do this it will trigger a submit.
<button type="button" class="tablinks"
onclick="openOnglet(event,'repartition')">Result</button>
If you mean by clicking this:
<input type="submit" id="Backtest" value ="Backtest" name =
"Backtest" onclick ="open_div_res(),openOnglet(event, 'repartition');" >
You have to change that into a button also

If I do understand this correctly, you want to NOT refresh the page when you click on submit.
Add a listener on your submit button, and, using jQuery
$("#mySubmitButton").on("click", function(event){
event.preventDefault();
// show the div code
$("#myDiv").show();
});
Or, vanilla javascript :
document.getElementById('mySubmitButton').addEventListener('click', function(e){
e.preventDefault();
document.getElementById('myDiv').classList.add('isVisible');
});
this should do the trick !

Try this:
<form action="#" method="post" name= "form1" id = "form1" onSubmit="return false;">
//Code here
</form>

Simple form submit doesn't work

Hi have very simple html with form, but submitting doesn't work.
I checked multiple solutions I found on stackoverflow, but still doesn't work.
<form class="form-horizontal well" method="post" id="upload_excel" name="upload_excel" enctype="multipart/form-data">
<fieldset>
<div class="control-group">
<div class="control-label">
<label>Excel File:</label>
</div>
<div class="controls">
<input type="file" name="file" id="file" class="input-large">
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" id="btn" name="Import" class="btn btn-primary button-loading" data-loading-text="Loading...">Upload</input>
</div>
</div>
</fieldset>
And JavaScript in the same file:
<script type="text/javascript" language="javascript" >
$(document).ready(function (e) {
$('#btn').on('submit',(function(e) {
alert('test');
}));
});
</script>
When I click on btn shouldn't the form be submitted and alert window occurs?

Try putting the on submit function on the form instead of on the button.
<script type="text/javascript" language="javascript" >
$(document).ready(function (e) {
$('#upload_excel').on('submit',(function(e) {
alert('test');
}));
});
</script>

What about the "action" attribute for the "form" element?

Basiclally you have to submit form so you should have the id of form in the onsubmit block and not input submit button.
<script type="text/javascript" language="javascript" >
$(document).ready(function (e) {
$('#upload_excel').on('submit',(function(e) {
alert('test');
}));
});
</script>
And Yes You Need to have the action attribute to make a post or get request to the server
Hope This Helps.

You have bad Jquery selector for .on('submit')
You can also use e.preventDefault() to prevent the form from actually being submitted.
Moreover, the <input> tag has no </input> closing tag, use value="Upload" instead for a submit or a button
$(document).ready(function (e) {
$('#upload_excel').on('submit',(function(e) {
e.preventDefault();
alert('test');
}));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal well" method="post" id="upload_excel" name="upload_excel" enctype="multipart/form-data">
<fieldset>
<div class="control-group">
<div class="control-label">
<label>Excel File:</label>
</div>
<div class="controls">
<input type="file" name="file" id="file" class="input-large">
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" id="btn" name="Import" class="btn btn-primary button-loading" data-loading-text="Loading..." value="Upload"/>
</div>
</div>
</fieldset>

You haven't defined the "action" parameter in tag. So, when you press Submit, you fire a POST call without having specified the URL to be called.
A simple example is:
<form enctype="multipart/form-data" action="__URL__" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="30000" />
Send this file: <input name="userfile" type="file" />
<input type="submit" value="Send File" />
</form>
Where URL is a page PHP or whatever else you have exposed for receiving this call. Another example is here.

First of all I alert a message showing that the submit button is pressed, using this instruction:
$('#btn').on('click',(function(e) {alert("Submitted");}));
After that I'm ensuring that the form is submitted using the jQuery
function .submit():
$( "#upload_excel" ).submit();
Finally, here is the entire script:
<script type="text/javascript" language="javascript" >
$(document).ready(function (e) {
$('#btn').on('click',(function(e) {
alert("Submitted");
$( "#upload_excel" ).submit();
}));
});
</script>
My answer is based on the jQuery documentation, & a Stackoverflow answer.

Required attribute not working using javascript submit

I make some form different action within different button
<form id="form" method="post" class="form-horizontal" enctype="multipart/form-data">
<input name="name" class="form-control" type="text" required>
</form>
<button type="button" class="btn btn-primary" onClick="submitForm('<?php echo base_url('order/add');?>')">Submit</button>
<button type="button" class="btn btn-warning" onClick="submitForm('<?php echo base_url('order/print');?>')">Print</button>
Javascript
function submitForm(action)
{
document.getElementById('form').action = action;
document.getElementById('form').submit(
);
}
Then, my required attribute not working. Did I do something wrong? Let me know if there is other solution.
Thanks,

I can't give you a good explanation but you need the submit buttons inside the form.
So if you would have a button like:
<input type="submit" value="Submit">,
it will trigger the required attribute.
#Remn If you would still stay on your structure with submit inside a function you could trigger yourself the validation like:
if ($("form")[0].checkValidity())
{
$("form").submit()
}
and then do something with inputs that are invalid by passing through each required element ( input is set in code ):
$('form :input[required="required"]').each(function()
{
if(!this.validity.valid)
{
$(this).focus();
// break
return false;
}
});
In the below case the invalid inputs will be focused one by one.
The whole code is:
$( function () {
$("body").on("click", "#trigger", function() {
if ($("form")[0].checkValidity())
{
$("form").submit()
}
$('form :input[required="required"]').each(function()
{
if(!this.validity.valid)
{
$(this).focus();
// break
return false;
}
});
});
});
Where #trigger is an id I set on the button to submit, you can make your own functions to achieve your goal I just used on().
I hope it helps!

Please try bellow code. i hope solve your problem.
<html>
<head>
<title>Submit</title>
<script type="text/javascript" language="javascript">
function submitForm(action)
{
document.getElementById('form').action = action;
document.getElementById('form').submit(
);
//alert(document.getElementById('form').action);
}
</script>
</head>
<body>
<form id="form" method="get" class="form-horizontal" enctype="multipart/form-data">
<input name="name" class="form-control" type="text" required="required">
<button type="submit" class="btn btn-primary" onclick="return submitForm('<?php echo base_url('order/add');?>');" id="submit">Submit</button>
<button type="submit" class="btn btn-warning" onclick="return submitForm('<?php echo base_url('order/print');?>');" id="print">Print</button>
</form>
</body>
</html>

I have test your code by adding Javascript part in Script tag it is working fine. And i tested it on Chrome Windows 10.
<form id="form" method="post" class="form-horizontal" enctype="multipart/form-data">
<input name="name" class="form-control" type="text" required>
</form>
<button type="button" class="btn btn-primary" onClick="submitForm('<?php echo base_url('order/add'); ?>')">Submit</button>
<button type="button" class="btn btn-warning" onClick="submitForm('<?php echo base_url('order/print'); ?>')">Print</button>
<script>
function submitForm(action) {
document.getElementById('form').action = action;
document.getElementById('form').submit();
}
</script>

Using javascript's form.submit() function will cause input validation to be bypassed (according to the HTML specification in point 4 of the form submission algorithm). The only way to trigger HTML input validation is to use a click event on a submit button inside the form, either by the user actually clicking, or in javascript with something like form.querySelector('input[type="submit"]').click().

Testing a simple javascript button

Hello gentlemen and ladies. I'm trying to test the button to see if it binds to event but it's not working. I have been at this for hours and couldn't find the answer.I'm looking for code that separates the HTML and javsScript. I'm new and I really appreciate your time. I can't get the alert to work when I click button.
var formId;
formId = document.GetElementById("button");
function run(){
alert("Stack overflow");
}
formId.addEventListener("submit", run, false);
<div id ="content">
<div id ="title">Special Offers</div>
<div id="colors">Sign-up to receive personalized offers!
</div>
<fieldset>
<legend> Please enter your information</legend>
<form action="#" method="post" />
<input type="text" />
<label for ="button">add</label>
</form>
</fieldset>
<!--**************Button******-->
<button type="submit" id="button">submit</button>
</div>

Try ...
var formId = document.getElementById("button");
function run(){
alert("Stack overflow");
}
formId.addEventListener("click", run, false);
Where I am using .getElementById (spelling) and the click event on the Listener.
Fiddle: http://jsfiddle.net/rfornal/9duqfgL6/

You could use the following code:
<div id ="content">
<div id ="title">Special Offers
</div>
<div id="colors">Sign-up to receive personalize offers!
</div>
<button type="submit" id="button" onclick="run()">submit</button>
</div>
and your JS should be as follows:
function run(){
alert("stack overflow");
}

Your form tag was self closing. It should be getElementById. Try the click event instead of the submit event.
Your button is outside the form. When you have your button inside it, you can add the submit event listener to your form.
var formId = document.getElementById("button");
function run(){
alert("Stack Overflow");
}
formId.addEventListener("click", run, false);
<div id ="content">
<div id ="title">Special Offers</div>
<div id="colors">Sign-up to receive personalized offers!</div>
<fieldset>
<legend> Please enter your information</legend>
<form action="#" method="post">
<input type="text"/>
<label for="button">add</label>
<button type="submit" id="button">submit</button>
</form>
</fieldset>
</div>