We Keep Coding

i am using required html tag for input fields but its not working [duplicate]

I'm using HTML5 for validating fields. I'm submitting the form using JavaScript on a button click. But the HTML5 validation doesn't work. It works only when then input type is submit. Can we do anything other than using JavaScript validation or changing the type to submit?
This is the HTML code:
<input type="text" id="example" name="example" value="" required>
<button type="button" onclick="submitform()" id="save">Save</button>
I'm submitting the form in the function submitform().

The HTML5 form validation process is limited to situations where the form is being submitted via a submit button. The Form submission algorithm explicitly says that validation is not performed when the form is submitted via the submit() method. Apparently, the idea is that if you submit a form via JavaScript, you are supposed to do validation.
However, you can request (static) form validation against the constraints defined by HTML5 attributes, using the checkValidity() method. If you would like to display the same error messages as the browser would do in HTML5 form validation, I’m afraid you would need to check all the constrained fields, since the validityMessage property is a property of fields (controls), not the form. In the case of a single constrained field, as in the case presented, this is trivial of course:
function submitform() {
var f = document.getElementsByTagName('form')[0];
if(f.checkValidity()) {
f.submit();
} else {
alert(document.getElementById('example').validationMessage);
}
}

You should use form tag enclosing your inputs. And input type submit.
This works.
<form id="testform">
<input type="text" id="example" name="example" required>
<button type="submit" onclick="submitform()" id="save">Save</button>
</form>
Since HTML5 Validation works only with submit button you have to keep it there.
You can avoid the form submission though when valid by preventing the default action by writing event handler for form.
document.getElementById('testform').onsubmit= function(e){
e.preventDefault();
}
This will give your validation when invalid and will not submit form when valid.

I may be late, but the way I did it was to create a hidden submit input, and calling it's click handler upon submit. Something like (using jquery for simplicity):
<input type="text" id="example" name="example" value="" required>
<button type="button" onclick="submitform()" id="save">Save</button>
<input id="submit_handle" type="submit" style="display: none">
<script>
function submitform() {
$('#submit_handle').click();
}
</script>

I wanted to add a new way of doing this that I just recently ran into. Even though form validation doesn't run when you submit the form using the submit() method, there's nothing stopping you from clicking a submit button programmatically. Even if it's hidden.
Having a form:
<form>
<input type="text" name="title" required />
<button style="display: none;" type="submit" id="submit-button">Not Shown</button>
<button type="button" onclick="doFancyStuff()">Submit</button>
</form>
This will trigger form validation:
function doFancyStuff() {
$("#submit-button").click();
}
Or without jQuery
function doFancyStuff() {
document.getElementById("submit-button").click();
}
In my case, I do a bunch of validation and calculations when the fake submit button is pressed, if my manual validation fails, then I know I can programmatically click the hidden submit button and display form validation.
Here's a VERY simple jsfiddle showing the concept:
https://jsfiddle.net/45vxjz87/1/

Either you can change the button type to submit
<button type="submit" onclick="submitform()" id="save">Save</button>
Or you can hide the submit button, keep another button with type="button" and have click event for that button
<form>
<button style="display: none;" type="submit" >Hidden button</button>
<button type="button" onclick="submitForm()">Submit</button>
</form>

Try with <button type="submit"> you can perform the functionality of submitform() by doing <form ....... onsubmit="submitform()">

2019 update: Reporting validation errors is now made easier than a the time of the accepted answer by the use of HTMLFormElement.reportValidity() which not only checks validity like checkValidity() but also reports validation errors to the user.
The HTMLFormElement.reportValidity() method returns true if the element's child controls satisfy their validation constraints. When false is returned, cancelable invalid events are fired for each invalid child and validation problems are reported to the user.
Updated solution snippet:
function submitform() {
var f = document.getElementsByTagName('form')[0];
if(f.reportValidity()) {
f.submit();
}
}

HTML5 Validation Work Only When button type will be submit
change --
<button type="button" onclick="submitform()" id="save">Save</button>
To --
<button type="submit" onclick="submitform()" id="save">Save</button>

Try this out:
<script type="text/javascript">
function test
{
alert("hello world"); //write your logic here like ajax
}
</script>
<form action="javascript:test();" >
firstName : <input type="text" name="firstName" id="firstName" required/><br/>
lastName : <input type="text" name="lastName" id="lastName" required/><br/>
email : <input type="email" name="email" id="email"/><br/>
<input type="submit" value="Get It!" name="submit" id="submit"/>
</form>

HTML5 required attribute trigger action with jQuery

I'm working on a prototype and I want to trigger an action after a submit but only if the required fields were filled.
I have this code
<button type="submit" onclick="doSomething()" class="btn btn-primary">Register</button>
And also an input on my form using the 'required' attribute from HTML 5, like this
<input type="text" class="form-control" placeholder="Name" required>
I want to trigger the action onclick only if the input was filled.
I suppose I could do this by checking if the input was filled using jQuery, I was wondering if there is a simpler way

Well, I have actually found a solution, if anyone is going through the same problem, this is how I did it.
Instead of using "onclick" on the button tag I added an "onsubmit" (I had no clue this existed) event inside my form tag with my doSomething function, like this:
<form onsubmit="doSomething()">
The function will only be called if the required inputs are filled, easy as that.
Thanks for the ones who tried to help anyway

Try using oninput event
function doSomething() {
console.log("do stuff")
}
document.querySelector("input").oninput = function() {
this.nextElementSibling.click()
}
<input type="text" class="form-control" placeholder="Name" required>
<button type="submit" onclick="doSomething()" class="btn btn-primary">Register</button>

Well you can always use this https://jsfiddle.net/2Lzo9vfc/26/
HTML
<button type="submit" class="btn btn-primary">Register</button>
<input type="text" class="form-control" placeholder="Name" required>
JS
$('button').click(function() {
var content = $('input').val();
if(content != '') {
alert(content);
}
});

form is not submiting with onclick event

I am trying to submit form on image click event but I am getting Uncaught TypeError: Object #<HTMLInputElement> has no method 'submit' this error after click event fire.
My Code:
<form name="searchRef" id="searchRef" method="get" action="#">
<input type="text" name="s" id="ref" value="" class="ref_search" />
<input type="submit" name="submit" id="ref_submit" value="GO" class="ref_submit" />
</span> <span> <img src="http://www.webdeveloper.com/forum/image.php?s=2c556ca62e6fd2a2e4d6ca925fb3fda1&u=8331&dateline=1057444055" alt="Go" onClick="document.getElementById('searchRef').submit();"> </span>
</form>
Any ideas or suggestions? Thanks.

You have to remove/change attribute name of submit button, e.g:
name="btnSubmit"
Otherwise, submit() method of FORM element is overwritten.

Change your submit button name from submit to ref_submit
as shown below
<input type="submit" name="ref_submit" id="ref_submit" value="GO" class="ref_submit" />

this is just an idea, but try using
document.forms["searchRef"].submit();
instead of
document.getElementById('searchRef').submit();

please change the form tag action attribute , repalce # with the target page name say action.php, and also add onsubmit="javascript:return false" in form tag

There is probably already an html element with id=searchRef in your page, so the getElementById() get the wrong one.
A better solution would be to replace your submit button by an input type=image:
<input type="image" name="ref_submit" id="ref_submit" value="GO" class="ref_submit"
src="path/to/your/image" />
Notice this will result in server side by a POST request with $_POST['submit_x'] and $_POST['submit_y'] (which corresponds to the (x,y) mouse coordinates from the top left of the image)

This error occurs because your name attribute as submit, try to change the name attribute or try below code.
<img src="http://www.webdeveloper.com/forum/image.php?s=2c556ca62e6fd2a2e4d6ca925fb3fda1&u=8331&dateline=1057444055" alt="Go" onclick='window.searchRef.submit();' />

Form resetting is not working

I'm using the following code to reset the form fields.
document.getElementById("form1").reset();//form1 is the form id.
It is not working. I also tried with JQuery. Even JQuery also not working.
$("#reset").click(function(){
$('form1')[0].reset();
});
My html code is
<form name="form1" id="form1" method="post">
<h3>Personal Information</h3>
<h4>Name</h4>
<input type="text" id="fname" name="fname" maxlength=50 size=11/>
<input type="text" id="mname" name="mname" maxlength=15 size=8/>
<input type="text" id="lname" name="lname" maxlength=50 size=11/>
<input type="button" id="reset" value="Reset" onclick="Reset()"/>
</form>
I'm following W3Schools. Here is my Fiddle. Can you please explain the mistake?

The problem here is that you've set the id of your button to "reset". This automatically overwrites the built-in reset method of the form element.
The solution is to use a different id attribute for your button.
So instead of:
<input type="button" id="reset" value="Reset" />
Use something like:
<input type="button" id="reset-button" value="Reset" />
See this fiddle.

Have you simply try this : Reset
<input type="reset" value="Reset"/>

I finally solved my issue. the problem is "id=reset". Because it overrides the reset method . I changed it to id="reset1". Now it is working

If your objective is only to reset the form, you could try this:
<input type="reset" id="reset" value="Reset" onclick="this.form.reset();"/>

Looks like your seleting $('form1') as in an element with a tag name of form1, while i think you actually want to select it by the id:
$('#form1')[0].reset();

With jQuery, the correct selector is :
$('#form1') // Select with ID
OR
$('form[name=form1]') // Select with name

I've updated your fiddle.
Why vanilla js isn't working:
You don't have...
document.getElementById("form1").reset();//form1 is the form id.
...within a reset function. You could do this:
function Reset() {
document.getElementById("form1").reset();//form1 is the form id.
}
Why jQuery isn't working:
You don't need to do all that you're doing. It's much more simple than that. Also, look at your 'form1' selector. You should likely add '#form1' instead. jQuery selects are different than the getElementByID function. As you can probably assume by the name, the getElementByID function is already getting the element by the ID; however with jQuery you have to specify those things. Also, don't really need the onClick attribute with jquery.

Ok, see my new jsfiddle:
http://jsfiddle.net/ty9rU/17/
So i renamed the button to reset_btn
Basicly you had an element called reset inside the form, and that caused the issue.

Why is form.submit() not working?

I have the following snipet in a page. I cannot for the life of me figure out why the form is not submitting when clicking the button1 element. I get an error in IE syaing that this object does not support this property or method. I put the document.poform in an alert, and it alerts a form object. I get the feeling that I am missing something super obvious maybe??
<pre>
<?
var_dump($_POST);
?>
</pre>
<form action="" method="post" name="poform">
<input name="test" type="text" />
<input name="button" type="button" value="button1" onclick="document.poform.submit();" />
<input name="submit" type="submit" value="button2" />
</form>

Since you have an <input> named submit, document.poform.submit is that <input>, not the submit() method.
Use a different name.

Change type="button" to type="submit"