I'm using datepicker with Django:
<form method="POST" action="{% url 'approval_date_action_modal' cpname=full_id %}"> {% csrf_token %}
<div class="input-group date" id='grm_date' data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-title="Approval Date" data-date-autoclose="true" data-date-end-date="0d" data-date-start-date="2018-11-14">
{{ approval_form.approval_date }}
<div class="input-group-addon">
<span class="material-icons md-12">date_range</span>
</div>
</div>
<br/>
<input class="btn btn-primary" type="submit" value="Confirm" />
</form>
when users clear the date and try to submit a blank date which corresponds to null in database, a warning "Please fill out this field" will pop up and cancel the submission.
Is there a simple way we can allow submission of a blank date in addition to the normal date of the stated format?
Related
I have two forms in one form.hbs page but with the same process.js file to process these two forms on different occasions with two different submit buttons.
When I hit the first submit button, it should be processed inside the process.js file and sent to the database, and when I hit the submit button of the second form in the same page, it should be processed still inside the process.js file and sent to the database. The first one works, but the second one doesn't, it keeps trying to submit the content of the first form. Please how do I solve this problem?
Thanks in advance.
forms.handlebar
{{!-- FIRST FORM - MATERIAL FORM --}}
<div id="materials">
<form action="/forms" method="POST" autocomplete="off">
<input type="hidden" name="_id" value="{{materials._id}}">
<div class="form-group">
<label>Category of Material</label>
<input type="text" class="form-control" name="matName" value="
{{materials.matName}}"
placeholder="Material Title">
<div class="text-danger">
{{materials.matNameError}}
</div>
</div>
<div class="form-group">
<label>Description</label>
<input type="text" class="form-control" name="desc" value="{{materials.desc}}"
placeholder="Material Description">
<div class="text-danger">
{{materials.descError}}
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-info">
<i class="fa fa-database"></i>Submit</button>
<a href="/material-list" class="btn btn-danger">
<i class="fa fa-list-alt"></i>All Material records
</a>
</div>
</form>
</div>
{{!-- SECOND FORM - EQUIPMENT FORM --}}
<div id="equipments" style="display:none">
<form action="/forms" method="POST" autocomplete="off">
<input type="hidden" name="_id" value="{{equipments._id}}">
<div class="form-group">
<label>Title of Equipment</label>
<input type="text" class="form-control" name="eqName" value="
{{equipments.eqName}}"
placeholder="Equipment Title">
<div class="text-danger">
{{equipments.eqNameError}}
</div>
</div>
<div class="form-group">
<label>Quantity</label>
<input type="desc" class="form-control" name="quantity" value="
{{equipments.quantity}}"
placeholder="Quantity of Equipment">
<div class="text-danger">
{{equipments.quantityError}}
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-info">
<i class="fa fa-database"></i>Submit</button>
<a href="/equipment-list" class="btn btn-danger">
<i class="fa fa-list-alt"></i>All Equipment records
</a>
</div>
</form>
</div>
router.js
//launching all forms
router.get('/forms', MaterialController.launchForm);
//posting & updating data to db
router.post('/forms', MaterialController.createElement)
router.post('/forms', EquipmentController.createElement);
//getting list of existing items
router.get('/material-list', MaterialController.Lists)
router.get('/equipment-list', EquipmentController.Lists)
//getting list by ids
router.get('/:id', MaterialController.ids)
router.get('/:id', EquipmentController.ids);
//deleting items from db
router.get('/delete/:id', MaterialController.delete);
router.get('/delete/:id', EquipmentController.delete)
I know there's a way to use javascript to choose which button is being clicked for submission, but I really don't know how to implement this.
Please any assistance offered will be highly appreciated
Thank you.
May it will be better to set "submit" action on form (as result remove tags)
const elemetns = {
equipmentsForm: document.getElementById('equipments') <== set this id to form,
materialsForm: document.getElementById('materials') <== set this id to form
}
after add submit to each form
elemetnts.equipmentsForm.submit(e => processForm(e, elemetnts.equipmentsForm, someRoute))
elemetnts.materialsForm.submit(e => processForm(e, elemetnts.materialsForm, someRoute))
after it create "processForm" func
fucntion processForm (e, form, route) {
e.preventDefault();
const data = new FormData(form);
$.ajax({
type: "POST",
url: route,
data
}).done(() => console.log('success'));
}
here i use $.ajax. But you can use new XMLHttpRequest() constructor. Find out how create XMLHttpRequest.
so, i think, it is enought to solve your case.
Best regards!
I'm quite new to all this and was wondering if you could help shed some light on this. I have a datepicker widget in a form in my html and a javascript code which responds to change in date picker. What I want is when the user changes the date in the date picker widget, to post the changes to my Django backend
The html snippet is
<form id="availability_form" method="POST" action="">
{% csrf_token %}
<div class="col-sx-12 col-sm-6 col-md-6 col-lg-6">
<div class="input-group date" data-provider="datepicker">
<input class="form-control" id="id_availableDate">
<div class="input-group-addon btn">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
</form>
and the javascript snippet is:
...
...
$('#id_availableDate').change(
function () {
$("#availability_form").submit();
}
);
This tends to work, I see that the data is posted and my Django view receives a post, but when I examine the contents I don't see any data from the datepicker sent. What am I doing wrong?
Thanks in advance
Just add the name of the field:
<form id="availability_form" method="POST" action="">
{% csrf_token %}
<div class="col-sx-12 col-sm-6 col-md-6 col-lg-6">
<div class="input-group date" data-provider="datepicker">
<input class="form-control" id="id_availableDate" name="availableDate">
<div class="input-group-addon btn">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
</form>
and you can get to the value as $_POST['availableDate'];
I would like to know how can i display an error message below the input field using angular js. If the field is empty i want to display "This field is required". Also how to check if the field name starts with alphanumeric values like (\?/%*:|"<.>) i need to display the error "The field name should not start with alphanumeric values" below that input field. // code goes here
<div ng-controller="ModalController">
<form novalidate name="inputForm" class="form-horizontal">
<div class="row">
<div class="col-md-12">
<cp-input name="username" ng-model="user.name"
label="{{'formlabels.reponame' | translate}}" required="true"
error-state="right">
</cp-input>
</div>
</div>
<div style="color:red" ng-show="inputForm.username.$error.required">First name is required</div><br>
</form>
<!-- Show Confirm -->
<button type="button" class="btn btn-primary" data-dismiss="modal"
data-ng-click="submitData()">Add</button>
</div>
It would be a good idea to use ngMessages directive and ngPattern - take a look at the doc link with example
<form name="myForm">
<label>
Enter your name:
<input type="text"
name="myName"
ng-model="name"
ng-minlength="5"
ng-maxlength="20"
ng-pattern="^[^\w+$]"
required />
</label>
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
</form>
ref https://docs.angularjs.org/api/ngMessages/directive/ngMessages
ng-messages will help you..Try this
<input ng-model="typeText" id="Sample" name="Sample" type="text" ng-pattern="^$|^[A-Za-z0-9]+" required/>
or ng-pattern="/^[a-zA-Z\s]*$/"
<div ng-messages="formname.Sample.$error">
<div ng-message="pattern">only characters are allowed</div>
<div ng-message="required">field required</div>
</div>
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 have used onClick method to confirm update for my Bootstrap form. but when i click create button it popup the confirm message without going to validation.
wht i want is if user click create button first it will show the required field validation and after all success only confirm popup should display..
please advice
<form data-toggle="validator" class="form-horizontal" role="form" method="POST"
action="{{ action('Admin\UserController#store') }}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="form-group">
<div class="col-md-12">
<label class="control-label popup-label">Full Name</label>
<input required type="text" class="form-control" name="full_name"
value="{{ old('full_name') }}">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label class="control-label popup-label">Username</label>
<input required type="text" class="form-control" name="username"
value="{{ old('username') }}">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label class="control-label popup-label">Password</label>
<input pattern=".{5,10}" required title="5 to 10 characters"
type="password" class="form-control"
name="password" value="{{ old('password') }}">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" onclick="return confirm('Do you want to create this admin?');">Create</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</form>
Your create button is of submit type, its default action is to submit the form. Make it of type button and use the below function:
<button type="button" class="btn btn-primary" onclick="createBtn();">Create</button>
<script>
function createBtn(){
if(confirm('Do you want to create this admin?')){
document.getElementsByTagName("form")[0].submit();
}
}
</script>
I presume you are using the Bootstrap Validator plugin: http://1000hz.github.io/bootstrap-validator/
This plugin provides a way to know when the form has been validated by providing you with an event you can listen on.
('#form').validator().on('validate.bs.validator', function (e) {
console.log('validated.');
// perform confirm and other post-validation tasks...
confirm('Do you want to create this admin?');
}