I want a simple form validation with the 'required' attribute. After clicking on submit button, I was unable to validate the form, and during the inspection, I noticed that form has added 'novalidate' attribute.
Here is my angular file.
<div>
<h2>New form validation</h2>
<form action="">
<input type="text" name="" id="" required />
<button>submitlhfg</button>
</form>
Note:- Without any value, the form shouldn't submit whenever my form is going submit.
Related
I have a simple form with one input field
<form ng-submit="UsernameModalInstance.submitUsername()">
<input type="text" required autofocus size="25" pattern="[^\s]+" title="no spaces allowed" placeholder="Enter Username Here...">
</form>
Note: this input field does not allow for no entry or any white spaces
Thus: my ng-submit function only fires when these requirements have been met
this is the functionality i want
However, there is another way to submit the form!
underneath this form i have a button:
<button class="btn btn-primary" title="You must enter a username to proceed" ng-click="UsernameModalInstance.submitUsername()" type="button">Submit Username</button>
The ng-click fires the same function as the ng-submit on the input
BUT I want this submit username button to have the same requirements as the form input.
currently, clicking the button will fire the function without meeting any of the requirements of having to enter something and no white spaces!
Is there a way to do this?
Here is a simple example. You can use it with ng-submit i.e replace onsubmit with ng-submit and no need of ng-click if you keep the submit button inside form element
function submitUsername(){
console.log("valid username");
event.preventDefault();//just to so it works here might not need in your code
}
<form onsubmit="submitUsername()">
<input type="text" required autofocus size="25" pattern="[^\s]+" title="no spaces allowed" placeholder="Enter Username Here...">
<button type="submit">Submit</button>
</form>
For form, without submit button, with 1 text input, do submit on Enter.
For form, without submit button, with more than 1 text input, do not submit on Enter.
Should both not submit on Enter?
<!-- This one do submit on Enter -->
<form action="/">
<input type="text" name="firstname" value="Mickey">
</form>
<!-- This one do not submit on Enter -->
<form action="/">
<input type="text" name="firstname" value="Mickey">
<input type="text" name="lastname" value="Jerry">
</form>
If the form has no submit button, then the implicit submission
mechanism must do nothing if the form has more than one field that
blocks implicit submission, and must submit the form element from the
form element itself otherwise.
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission
You can see here how the forms works with no submit button:
https://www.tjvantoll.com/2013/01/01/enter-should-submit-forms-stop-messing-with-that/#no-submit-buttons
Generally, it is not okay to suppress the Enter key as a way to submit a form. That being put away, you can achieve this kind of functionality, using the jQuery library for JavaScript (it will be easier for you to use).
Here is a modified version of your HTML. I have added a data attribute to identify those forms, which would not submit on Enter key:
<!-- This one WILL NOT submit, when the Enter key is pressed -->
<form action="/" data-disable-enter="1">
<input type="text" name="firstname" value="Mickey">
</form>
<!-- This one WILL submit, when the Enter key is pressed
If you want to suppress the Enter key submission, add the data attribute data-disable-enter="1" -->
<form action="/">
<input type="text" name="firstname" value="Mickey">
<input type="text" name="lastname" value="Jerry">
</form>
And here is the JavaScript code, using the jQuery library to suppress the Enter key form submission. An event listener is attached to listen for the keydown event on each of the form elements (input, select and textarea) in all forms that have the data attribute data-disable-enter="1". If the pressed key code is 13 (which means "Enter"), then we would prevent the default action, associated with the key pressing, which in our case is the form submission.
jQuery("form[data-disable-enter='1']").find("input, select, textarea").on("keydown", function(e){
// 13 is the key code for the Enter key
if(e.keyCode === 13){
e.preventDefault();
}
});
I have one Form which have one submit button let us name this as FORM 1 and inside that form I have another form with one submit button and this form name is FORM 2. Now my problem is When i am clicking submit button of FORM 2, FORM 2 submit button is using an action of FORM 1 which i don't want. I know its sounds confusion but check the codes you will come to know :
<form action="pks.php" method="post">
<input type="text" name="mob">
<input type="text" name="opr">
<form action="pksa.php" method="post">
<input type="text" name="opra">
<input type="submit" value="SUBMIT">
</form>
<input type="submit" value="SUBMIT">
</form>
I am trying something like to achieve but i am not able to Please help me out
I have one Form which have one submit button let us name this as FORM
1 and inside that form I have another form with one submit button and
this form name is FORM 2.
In HTML you cannot nest <form> elements. This simply results in invalid markup and undefined behavior. You will have to reorganize your markup in a way that doesn't involve nested forms.
You cannot have nested forms. Browsers won't allow that. Actually if you inspect the form in browser developer tools, you will see that child forms are removed.
I have one page with two separate forms. Most input fields are required. When I click the submit button on the second form, it asks me to fill out the required fields in the first form.
How do I make sure that it only validates the form in which I clicked the submit button?
<form method="post" action="index.php" name="orderQuick" id="orderQuick">
<input type="text" name="street" id="street" required>
<button type="submit" name="submitBtn" id="submitBtn">Submit</button>
</form>
<form method="post" action="index.php" name="order" id="order">
<input type="text" name="street2" id="street2" required>
<button type="submit" name="submitBtn2" id="submitBtn2">Submit</button>
</form>
I think it is because you have not closed <button> tag so it is considering both input type in one form. Close <button> tag.I think it will solve your issue.
I think you will need to use the jqueryvalidation plugin: (http://jqueryvalidation.org/valid/)
Using this plugin, on the click of the respective submit buttons, you just need to call the method:
$("#orderQuick").valid();
and
$("#order").valid();
This should solve your issue.
I am trying to figure out, how can I automatically submit a url at the following page
http://www.facebook.com/sharer.php
without actually clicking on the submit button.
Thanks.
You can find that from the page source. There is a form defined...
<form action="/sharer.php" method="get">
and the button is a submit button, which means that when you click the button, the form data is sent as a get request to http://www.facebook.com/sharer.php - in other words, it submits back to itself.
Update - asker wants to know how to submit the form without clicking on the link.
The form is:
<form action="/sharer.php" method="get">
<input type="text" class="inputtext DOMControl_placeholder" id="share_input" name="u" placeholder="http://" value="http://" title="http://" />
<input type="hidden" name="appid" value="2309869772" />
<label class="mrm uiButtonNoText uiButton uiButtonConfirm uiButtonMedium" id="share_submit">
<input value="Share" type="submit" />
</label>
</form>
So you need to GET a URL with form data something like the following
http://www.facebook.com/sharer.php?u=your_encoded_url&appid=yourappid