I have an HTML page with form block
<div>
<form>
<div class="row">
...
<input required> a </input>
...
<div>
<div class="row">
...
<input required> b </input>
...
<div>
<div>
<button ng-click="expand()"> Expand </button>
<button type="submit" ng-submit="create()"> Start </button>
</div>
</form>
</div>
When I click on start, and a or b are empties, message is shown: "Please fill out this field" (which it is the desire behavior) . But when I fill out this field, and click again, create() is not submitted and I get the following error: An invalid form control with name='' is not focusable.
I try also in this way:
<div>
<form ng-submit="create()">
<div class="row">
...
</div>
<div>
<button ng-click="expand()"> Expand </button>
<button type="submit"> Start </button>
</div>
</form>
</div>
But then even if I click on Expand, create() is executed instead of expand().
I also try yo change ng-submit to ng-click, but then it doesn't validate that the fields is fill out.
My purpose is that create() will NOT be executed if one of the fields is empty, and proper message will be shown.
Try this:
<div>
<form ng-submit="submit()">
<div class="row">
<input required type="text" ng-model="text" name="text_a">A</input>
</div>
<div class="row">
<input required type="text" ng-model="text" name="text_b">B</input>
</div>
<div>
<button ng-click="expand()"> Expand </button>
<input type="submit" id="submit" value="Create" />
</div>
</form>
</div>
The simple way to do form validation is like this:
Give your form a name attribute
<form name="myForm">
Add the required attribute to your inputs.
Disable your button with
<button ng-disable="myForm.$invalid" ng-click="create()">Submit</button>
If one of your inputs is invalid you can likewise display a message with a span or div that has the ng-show="myForm.$invalid" attribute.
I'm not clear on exactly what you are doing with the data from the inputs.
Related
So basically I have a page where users can post a status, users are able to comment on these status's by typing in the textbox and clicking on the 'Reply' button. However I much rather remove the button so users can just press the enter key to post a reply. Any help would be greatly appreciated!
<div id="status_'.$statusid.'" class="panel panel-default">
<form>
<div class="input-group">
<input type="text" id="replytext_'.$statusid.'" onkeyup="statusMax(this,250)" class="form-control" placeholder="Add a comment.." autocomplete="off">
</div>
<button id="replyBtn_'.$statusid.'" onclick="replyToStatus('.$statusid.',\''.$url.'\',\'replytext_'.$statusid.'\',this)">Reply</button>
</form>
</div>
You can submit a form by pressing enter when a form element is active. See the following snippet that just hooks into the form via it's onSubmit event handler.
function handleSubmit() {
alert('Do your thing...');
}
<form id="commentForm" onSubmit="handleSubmit(); return false;">
<div class="input-group">
<input type="text" id="replytext_" class="form-control" placeholder="Add a comment.." autocomplete="off">
</div>
</form>
I'm using jquery form validation from http://www.runningcoder.org/jqueryvalidation/
demo.html
<form id="form-signup_v1" name="form-signup_v1" method="get" class="validation-form-container">
<div class="field">
<label for="signup_v1-username">First Name</label>
<div class="ui left labeled input">
<input id="first_name" name="first_name" type="text">
<div class="ui corner label">
<i class="asterisk icon">*</i>
</div>
</div>
</div>
<input name="ok" id="ok" type="submit" class="ui blue submit button" value="Ok">
<input name="cancel" id="cancel" type="submit" class="ui blue submit button" value="Cancel">
</form>
<script>
$('#form-signup_v1').validate({
submit: {
settings: {
inputContainer: '.field'
}
}
});
</script>
I'm use form validation in the url not include the value of submit button
demo.html?first_name=John
I try to remove jquery form validation in the url include the value of submit button
demo.html?first_name=John&ok=OK
I want to check submit button when click from query string but when i use validation the url alway not include query string of button like the figure 1
If you want that the query doesn't include the button name just remove the name attribute from <input type = "button" name="ok">. Also assign a value to the button. By default the submit action forms the query string from the name value pairs in the form.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="get">
<input name="first_name" type="text" />
<input type="submit" value="button">
</form>
I'm having problems simulating a click via javascript on a mailchimp pop-up subscribe form and i need your help.
<!-- Title & Description - Holds HTML from CK editor -->
<div class="content__titleDescription" data-dojo-attach-point="descriptionContainer"><strong>Unlock the content </strong>by subscribing to our page.</div>
<!-- Form Fields -->
<form action="//mc.us7.list-manage.com/subscribe/form-post?u=bcd9828fa83ea7a231ffbee26&id=1928481ac4" accept-charset="UTF-8" method="post" enctype="multipart/form-data" data-dojo-attach-point="formNode" novalidate="">
<div class="content__formFields" data-dojo-attach-point="formFieldsContainer">
<div class="field-wrapper" id="uniqName_3_0" widgetid="uniqName_3_0">
<label for="mc-EMAIL">Email Address</label>
<input type="text" name="EMAIL" value="" id="mc-EMAIL" class="invalid">
<div class="invalid-error" style="display: block;">This field is required.</div>
</div>
<div class="field-wrapper" id="uniqName_3_1" widgetid="uniqName_3_1">
<label for="mc-FNAME">First Name</label>
<input type="text" name="FNAME" value="" id="mc-FNAME" class="valid">
<div class="invalid-error" style="display: none;"></div>
</div>
<div style="position:absolute;left:-5000px;">
<input type="text" name="b_bcd9828fa83ea7a231ffbee26_1928481ac4" tabindex="-1" value="">
</div>
</div>
<div class="content__button">
<input class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
</div>
</form>
<!-- Footer - Holds HTML from CK editor -->
<div class="content__footer" data-dojo-attach-point="footerContainer"></div>
</div>
<div class="modalContent__image" data-dojo-attach-point="formImageContainer"></div>
The code that i'm trying to target is:
<input class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
It's the submit button "Subscribe" that you can also see in
http://www.aspeagro.com/EN_Program_Abricot.html
Thank you!
How about this? I think is should do what you're after?
HTML
<input id="submit-button" class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
JS
$('#submit-button').on('click', function(e){
e.preventDefault();
// Do what you want to do
});
set id="btn" attribute to your submitting button and using jQuery you can trigger click with $("#btn").click(); call
If your aim is to submit the form, then don't bother sending a click event, but use the form's submit method:
var form = document.getElementById('uniqName_3_0').parentNode.parentNode;
form.submit();
The code is of course easier if you give the form an id attribute:
<form id="myform" ...
and then:
document.getElementById('myform').submit();
That button is inside an iframe. To access it from the parent page you would trigger it like this:
$('iframe').contents().find('input:submit').click()
I am trying to validate input fields on submit/ok button click in a modal window using angularjs framework. What I have tried are to add the attributes required/ng-required on my input button. But on my ok button click the input text field is not validated and the modal window is dismissed. As below is my modal-body. I would like to see the angular behaviour of showing the red border around it on click of ok.
<div class="modal-body">
<input type="text" class="input-box" size="10" required ng-model="data.myNumber"/>
</div>
Is there something additional I need to do in my event handler for submit buttons? Below is a plunker I created for the demo. Any help would be highly appreciated.
http://plnkr.co/edit/ACoTQgIVnWnR92LngT89?p=preview
By the way the plunker will run only in firefox.
First you'll need to use the correct elements and corresponding classnames. You'll need to wrap your input in a div with classname form-group, and that needs to be wrapped into a form element. The actual input needs to have the form-control class:
<form>
<div class="form-group">
<input type="text" class="form-control" size="10" ng-model="data.myNumber" required/>
</div>
</form>
A nice read on properly using forms with bootstrap can be found here:
http://getbootstrap.com/css/#forms
Now that it's a proper bootstrap form you can add angular validation. That's very simple just by giving the form and the input a name attribute:
<form name="modalForm">
<div class="form-group">
<input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required/>
</div>
</form>
Now angular will preform validation in the background. It will add modalForm to the scope of your modalcontroller from where you can get the state of the form and it's input elements.
Now because of the required attribute the input and form has been deemed invalid which can be checked by using: modalForm.modalInput.$invalid That will return true, when the input is empty . You can use it to add the has-error class to the form-group div element which will turn the border of the input element to red. You can dynamicly add this class by using the ng-class directive:
<div class="form-group" ng-class="{ 'has-error': modalForm.modalInput.$invalid }" >
<input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required/>
</div>
</form>
You can also add a message which also will be colored through the has-error class. Add a span element with the help-block class and use the ng-show directive to toggle it on the required error:
<div class="form-group" ng-class="{ 'has-error': modalForm.modalInput.$invalid }" >
<input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required/>
<span ng-show="modalForm.modalInput.$error.required" class="help-block">Input is required.</span>
</div>
</form>
Now if you want to make it impossible to push the ok button when the form is invalid you can toggle the disabled class and/or add use the ng-disabled directive:
<button class="btn btn-primary" ng-disabled="modalForm.$invalid" ng-class="{ 'disabled': modalForm.$invalid }" ng-click="ok()">OK</button>
I recommend reading the previous link on bootstrap forms and the following guide for using angular's forms. It has good examples:
https://docs.angularjs.org/guide/forms
Here's the complete modal code and a working example on Plunker:
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">My Modal</h3>
</div>
<form name="modalForm">
<div class="modal-body">
<div class="form-group" ng-class="{ 'has-error': modalForm.modalInput.$invalid }" >
<input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required/>
<span ng-show="modalForm.modalInput.$error.required" class="help-block">Input is required.</span>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-disabled="modalForm.$invalid" ng-class="{ 'disabled': modalForm.$invalid }" ng-click="ok()">OK</button>
<button class="btn btn-primary" ng-click="cancel()">Cancel</button>
</div>
</form>
</div>
http://plnkr.co/edit/GUE3sGci478obwOrzhNw?p=preview
PS: i know it doesn't answer you question as to how to preform input validation on button click but that's because it's not "the angular way" of using forms. The above and the links i provide should give you a good idea on how to properly use validation within Angular. Hope it helps, good luck.
Here are the main directions to get what you want:
Wrap your input in a <form> element.
In the ok() function, close modal only if it's valid
I also replaced type="text" with type="number", since you want the user to input a number. Also corrected the plunker to make it work:
ModalInstanceController
app.controller('ModalInstanceCtrl', function($scope, $modalInstance){
$scope.ok = function () {
if ($scope.numberForm.$valid) {
$modalInstance.close();
}
};
// ...
}
HTML
<form name="numberForm">
<div class="form-group">
<input type="number" class="form-control input-box" required ng-model="data.myNumber"/>
</div>
<button class="btn btn-primary" ng-click="ok()" >OK</button>
<button class="btn btn-primary" ng-click="cancel()">Cancel</button>
</form>
See plunker
Improvement: Play with angular validation to add red borders if input is invalid:
<form name="numberForm">
<div class="form-group" ng-class="{ 'has-error' : numberForm.myNum.$invalid }">
<input type="number" name="myNum" class="form-control input-box" required ng-model="data.myNumber"/>
</div>
<button class="btn btn-primary" ng-click="ok()" ng-disabled="numberForm.$invalid">OK</button>
<button class="btn btn-primary" ng-click="cancel()">Cancel</button>
</form>
See forked plunker
On my form there are a few input fields, once the users entered the values into the input field and hit submit, I want the values to populate a few corresponding elements.
How can I do it using jQuery without refreshing the page?
<form method="get">
<label for="yourName">Your name</label>
<input name="yourName" id="yourName" type="text">
<button type="submit">Submit</button>
</form>
<div id="result">
<span class="rName"></span>
</div>
Some failed JS.
$('#hCardForm').submit(function() {
var rName = $('#yourName').val();
$('.rName').text(rName);
});
There are 2 things wrong with your code.
1. you don't have an id on your form
2. you are not stopping the submit of the form.
You could change the button type equal to button instead of submit and submit the form via jquery.
jsfiddle
<form method="get">
<label for="yourName">Your name</label>
<input name="yourName" id="yourName" type="text">
<button type="submit" id="submit">Submit</button>
</form>
<div id="result">
<span class="rName"></span>
</div>
$('#submit').click(function(event){
event.preventDefault();
$('#result .rName').text($('#yourName').val());
});
http://jsfiddle.net/MswhY/