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>
Related
I want to create a form about the job application page, but i want to do some validation about if the user already fill up all the element in the form, only the submit button can click, and the submit button will link to another html page to show "your application is successful received". How can i do, thank you so much. I so a part of my code
<label for="Minimum Salary (MYR)"><img src="Web Page Image (Koh Xin Hao)/Money.png"/> Minimum Salary (MYR)</label>
<input type="text" id="Minimum Salary (MYR)" name="Minimum Salary (MYR)" value="RM " maxlength="8" required="required">
<label for="Nationality"><img src="Web Page Image (Koh Xin Hao)/Card Issuing Country.png"> Nationality</label>
<input type="text" id="Nationality" name="Nationality" placeholder="Malaysia" required="required">
<div><p>The application process will take up to 2 days. If your application is approved by the company, we will inform you via email or telephone call. Thanks for you application ^-^</p></div>
<input type="submit" required="required" class="btn" onclick="location.href='Payment Successful.html'"/>
<button type="submit" class="btn" onclick="location.href='Payment Successful.html'">Submit</button>
Seen the form is not fill up anything but the submit button also can click. I already put required="required" inside my code but the validation is not working.
If i m not wrong so you want to ask that how to validate all fields and submit form to a new page.
If yes so
<input type="?" name="?" required />
add required attribute to require that feild
And give a action attribute to your form where u want to submit that form
Example <form action="your page" type="post">
Hope it helps you
Let me know if i misjudge your problem
You need to use Javascript to check if the fields have been filled in and if so disable the button.
You also need to change the required="required" to just required as shown here https://www.w3schools.com/tags/att_input_required.asp
You also need to wrap it all in a form tag and use the action field to supply the next page when it is submitted as per https://www.w3schools.com/tags/tag_form.asp
You may need to do more with validation in Javascript this is basicly only disabling the other button if the fields aren't blank. You can see more about JS validation here https://www.w3schools.com/js/js_validation.asp
function validateForm(){
var input1 = document.getElementById("input1").value;
var input2 = document.getElementById("input2").value;
if(input1==""){
console.log("input1 is blank!");
}else if(input2==""){
console.log("input2 is blank!");
}else{
console.log("inputs are not blank");
document.getElementById("button").disabled = true;
}
}
<form action="form_submitted_page" method="POST">
<label for="input1">input1</label>
<input type="text" id="input1" name="input1" required onchange="validateForm()">
<label for="input2">input2</label>
<input type="text" id="input2" name="input2" required onchange="validateForm()">
<input type="submit" value="Submit">
</form>
<button id="button" onclick="document.location.href='google.com'">Google (to be disabled)</button>
I'm have a strange issue in my Angular form. I have a simple form like the following:
<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
<button (click)="addUser()">Add a user</button>
<input name="first" ngModel required #first="ngModel">
<input name="last" ngModel>
<button>Submit</button>
</form>
The problem is that when I press ENTER when in the form, instead of submitting, it fires the function addUser(), which is not what I want it to do.
How do I stop it from "clicking" ADD A USER and firing addUser()?
The solution was simply to add the type attribute with value button to the first button.
The browser assigns type="submit" by default to all buttons.
Simply needed to change
<button (click)="addUser()">Add a user</button>
to
<button (click)="addUser()" type="button">Add a user</button>
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.
If there are multiple submit buttons on a form,which submit button is triggered when user hits enter key in a input type="text"
HTML Standard (inplicit submission):
A form element's default button is the first submit button in tree
order whose form owner is that form element.
https://html.spec.whatwg.org/multipage/forms.html#implicit-submission
Give it a try:
<form>
<input type='text'>
<input onclick="alert('FIRST')" type="submit" value="FIRST" />
<input onclick="alert('SECOND')" type="submit" value="SECOND" />
</form>
It should be first type="submit" input.
Fiddle: http://jsfiddle.net/ddan/5tmwjdad/
here is my code
<body>
<input type=text name=name>
<form action=new3.jsp method=post name="f1">
<input type=text name=name>
<input type=submit value=next>
</form>
<form action=new1.jsp method=post>
<input type=submit value=back>
</form>
</body>
as you can see there are two forms here with two different submit buttons named "next" and "back". The text box is in the form where "next" button is. My question is here how to send the value of this text box to "new1.jsp" clicking "back button" without using javascript. Thanks in advance...
Don't post form to JSPs. Post the to servlets instead, and let the server analyze the parameters and forward to the appropriate JSP depending on which button has been clicked:
<form action="/controllerServlet" method="post" name="f1">
<input type="text" name="name"/>
<input type="submit" name="destination" value="next"/>
<input type="submit" name="destination" value="back"/>
</form>
Using the above form (which BTW, is valid HTML), the servlet can use the value of the "destination" parameter. If it's "next", it should forward to new3.jsp. If it's back, it should forward to "new1.jsp". And if, for example, you want to redisplay the same page because the user didn't enter a valid value in the text field, it can do so.
That's the well-known MVC pattern. You should use it.