I have a simple form with a text-input and two checkbox and I need to set the property "required" at checkbox (I need that at least one of that checkbox is checked).
<div class="control-group">
<label class="control-label" for="inputEmail"><?= $this->labelfieldEmail; ?></label>
<div class="controls">
<input type="text" name="email" id="emailField"
placeholder="Email" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="productField"><?= $this->labelfieldProduct; ?></label>
<div class="controls" >
<input type="checkbox" id="inlineCheckbox1" value="widget" name="product[]" <?php if ($this->selectedProduct == "widget") { echo "checked"; }?>/>
Widget for website
<br/>
<input type="checkbox" id="inlineCheckbox2" value="app" name="product[]" <?php if ($this->selectedProduct == "app") { echo "checked"; }?>/>
App mobile
</div>
</div>
Please, Any suggests?
EDIT
I tried to use jqBootstrapValidation library in the follow way, but it doesn't works:
1. add library
2. Add this into <head> tag:
<script>
$(function () {
$("input,select,textarea").not("[type=submit]").jqBootstrapValidation();
});
</script>
3 this is my form code:
<form class="form-horizontal" method="POST" action="<?= $this->baseUrl($this->pathBusinessThankyou);?>">
<div class="row-fluid">
<div class="row-fluid">
<br />
<div class="control-group">
<label class="control-label" for="inputName"><?= $this->labelfieldName; ?></label>
<div class="controls">
<input type="text" id="fullnameField" name="fullname" required />
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail"><?= $this->labelfieldEmail; ?></label>
<div class="controls">
<input type="email" id="emailField" name="email" required />
</div>
</div>
<div class="control-group">
<label class="control-label" for="productField"><?= $this->labelfieldProduct; ?></label>
<div class="controls" >
<label class="checkbox">
<input type="checkbox"
data-validation-minchecked-message="<?= $this->validationOneProduct; ?>"
data-validation-minchecked-minchecked="1" value="widget" name="product[]"
<?php if ($this->selectedProduct == "widget") { echo "checked"; }?> />
Widget per il tuo sito
</label>
<label class="checkbox">
<input type="checkbox" value="app" name="product[]" aria-invalid="false"
<?php if ($this->selectedProduct == "app") { echo "checked"; }?> />
App per il tuo hotel
</label>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail"><?= $this->labelfieldNote; ?></label>
<div class="controls">
<textarea rows="3" name="comment" id="commentField"></textarea>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn input-block-level btn-large btn-success">
<?= $this->labelSendRequest; ?>
<i class="icon-ok icon-white"></i>
</button>
</div>
</div>
</div>
</div>
</form>
A JQuery validation plugin for bootstrap forms:
http://reactiveraven.github.io/jqBootstrapValidation/
You are trying to run a validation with php while the page has already been loaded. For the validation to work each time you check another box, a script needs to run again to perform the validation. This is much easier to achieve with a jQuery script that executes each time a checkbox is clicked.
Related
In my webapp i have made two <fieldset> one for four <input> fields and one for
checkboxes. Now i am using this parsely lib on these <fieldset> it is not working on it. but it works on othere pages that in which different fields have been made. now i don't know about this lib so much if it is work on checkboxes or not. and also i dont wanna apply parsely lib on these checkboxes.
So my question is :
why it does not work on given below code which is in my webapp it is
one page but on other page it works.?
Here's code:
<form id="form1" action="" method="POST" enctype="multipart/form-data" >
<input type="hidden" id="user_id" name="user_id" value="<?php echo empty($user_id)?"":$user_id;?>" />
<fieldset>
<legend>Basic Info</legend>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">First Name *</label>
<p id="validation"></p>
<input type="text" class="form-
control" id="fname" name="fname" value="<?php echo empty($fname)?"":$fname;?>"
placeholder="Enter First Name" data-type="alphanum" maxlength="45"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="email">Last Name *</label>
<input type="text" class="form-control" id="lname" name="lname" value="<?php echo empty($lname)?"":$lname;?>" placeholder="Enter Last Name" data-type="alphanum" maxlength="45"/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">Email *</label>
<input type="text" class="form-
control" id="email" name="email" value="<?php echo empty($email)?"":$email;?
>"
placeholder="Enter Email" data-type="alphanum" maxlength="45"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="email">Mobile #</label>
<input type="text" class="form-control" id="mobile" name="mobile" value="<?php echo empty($mobile)?"":$mobile;?>" placeholder="+55 99 99999999" data-type="alphanum" maxlength="45"/>
</div>
</div>
</div>
<div class="row" style="display:none;">
<div class="col-md-6">
<div class="form-group">
<label for="status">Status</label>
<div>
<span class="text-muted m-l-5">InActive</span>
<input type="checkbox" data-render="switchery" id="status" name="status" data-theme="default" checked />
<span class="text-muted m-l-5">Active</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="status">All Permissions</label>
<div>
<span class="text-muted m-l-5">No</span>
<input type="checkbox" data-render="switchery" id="status" name="status" data-theme="default" checked />
<span class="text-muted m-l-5">Yes</span>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
Here for checkboxes
</fieldset>
I found the answer to my question. after spending an hour reading official docs.It says
Checkbox, radio and select multiple are a bit different than regular
input, textarea or simple select. They need to have either a name or
an id attribute to be correctly bound and validated by Parsley.
Otherwise, they will be ignored and a warning will be put in the
console.
I have a form with the following setup:
<div class="row">
<div class="col-3">
#include('acp.sidebar')
</div>
<div class="col-9">
#if (count($errors) > 0)
<div class="alert alert-danger">
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
<form class="form-horizontal" role="form" method="POST" action="{{ url('acp/provider/add') }}" enctype="multipart/form-data">
{{ csrf_field() }}
<input type="hidden" name="id">
<fieldset>
<legend>Grunddaten</legend>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="form-group">
<label for="description">Beschreibung</label>
<textarea class="form-control" id="description" name="description" required></textarea>
</div>
<div class="form-group">
<label for="url">Domain</label>
<input type="text" class="form-control" id="url" name="url" required>
</div>
<div class="form-group">
<label for="ref">Ref-Code</label>
<input type="text" class="form-control" id="ref" name="ref" required>
</div>
<div class="form-group">
<label for="image">Logo</label>
<input type="file" name="image" id="image" class="form-control" accept="image/*">
</div>
<div class="form-group">
<label for="checkboxes">Payment-Anbieter</label>
<div>
#foreach($paymentProviders as $key => $provider)
<label class="checkbox-inline" for="checkboxes-{{$key}}">
<input name="paymentProviders[]" id="checkboxes-{{$key}}" value="{{$provider->id}}" type="checkbox">
<img src="{{url('/images/paymentProvider/small/'.$provider->image)}}">
{{$provider->name}}
</label>
#endforeach
</div>
</div>
</fieldset>
<fieldset>
<legend>Crawler</legend>
<div class="form-group">
<label for="attributes">Suchattribute</label>
<input type="text" class="form-control" id="attributes" name="attributes" required>
</div>
<div class="form-group">
<label for="crawlerType">Typ</label>
<select id="crawlerType" name="crawlerType" class="form-control">
#foreach($crawlerTypes as $crawlerType)
<option value="{{$crawlerType}}">{{$crawlerType}}</option>
#endforeach
</select>
</div>
</fieldset>
<div class="form-group">
<div class="pull-right">
<button type="submit" class="btn btn-primary">
Absenden
</button>
</div>
</div>
</form>
</div>
</div>
As you can see there is a input named "attributes" down below. When I add this, I can't submit my form. It's like clicking on a button with no "submit" attribute.
After removing or renaming this input, it works. It's not a big thing to rename my input - I'm just interested if this is a bug, or a for me unkown feature.
I'm using Bootstrap v4.0.0-alpha.6 and Laravel 5.4.22.
I have a form on my website to allow clients to submit inquiries but I need to add the option of adding files, in this case, it would be photos.
I can't find the proper solution for this. I'm new on this matter and I hope someone can help me.
Here it is the code i have about the form:
<form enctype="multipart/form-data" name="<?=$form_name?>" id="<?=$form_name?>" method="post" action="javascript:void(0);" >
<input type="hidden" name="lang" id="lang" value="<?=$_SESSION["lang"]?>" />
<input type="hidden" name="car_id" id="car_id" value="<?=$_SESSION["car_id"]?>" />
<input type="hidden" name="current_url" id="current_url" value="<?=$_SESSION["current_url"]?>" />
<!--NOME-->
<div class="form-group">
<? $input_name = $form_name."_"."name"; ?>
<label for="<?=$input_name?>"><?=NAME?>*</label>
<input type="text" class="{target:'#<?=$input_name?>_status',tagToload:{'.<?=$input_name?>':'#<?=$input_name?>_status','.script':'#<?=$result_div?>'}} form-control watermark required" name="<?=$input_name?>" value="<?=$_POST[$input_name]?>" id="<?=$input_name?>" placeholder="<?=NAME_PLACEHOLDER?>">
</div>
<!--END NOME-->
<!--EMAIL-->
<div class="form-group">
<? $input_name = $form_name."_"."email"; ?>
<label for="<?=$input_name?>"><?=EMAIL?>*</label>
<input type="email" class="{target:'#<?=$input_name?>_status',tagToload:{'.<?=$input_name?>':'#<?=$input_name?>_status','.script':'#<?=$result_div?>'}} form-control watermark required" name="<?=$input_name?>" value="<?=$_POST[$input_name]?>" id="<?=$input_name?>" placeholder="<?=EMAIL_PLACEHOLDER?>">
</div>
<!--END EMAIL-->
<!--SUBJECT-->
<div class="form-group">
<? $input_name = $form_name."_"."subject_other"; ?>
<label for="<?=$input_name?>"><?=SUBJECT?>*</label>
<input type="text" class="{target:'#<?=$input_name?>_status',tagToload:{'.<?=$input_name?>':'#<?=$input_name?>_status','.script':'#<?=$result_div?>'}} form-control watermark required" name="<?=$input_name?>" value="<?=$_SESSION['subject']?>" id="<?=$input_name?>" placeholder="<?=SUBJECT_PLACEHOLDER?>" <?=(isset($_SESSION["subject"])) ? 'readonly="readonly"' : ''?>>
</div>
<!--END SUBJECT-->
<!--MESSAGE-->
<div class="form-group" style="margin-bottom: 10px;">
<? $input_name = $form_name."_"."message"; ?>
<label for="<?=$input_name?>"><?=MESSAGE?>*</label>
<textarea class="{target:'#<?=$input_name?>_status',tagToload:{'.<?=$input_name?>':'#<?=$input_name?>_status','.script':'#<?=$result_div?>'}} form-control watermark required" name="<?=$input_name?>" id="<?=$input_name?>" placeholder="<?=MESSAGE_PLACEHOLDER?>" rows="3"></textarea>
</div>
<!--END MESSAGE-->
<span class="blue_label blue_label_block blue_label_small" style="text-align: left;">* Campos de preenchimento obrigatório.</span>
<div class="form-group pull-right" style="margin-bottom: 20px;">
<input type="reset" class="btn btn-primary" value="<?=CLEAR?>">
<a type="button" class="btn btn-default ml20" id="formSubmitLink_<?=$form_name?>" href="javascript:;"><?=SEND?></a>
</div>
<br class="clear">
<div class="resultForm" id="<?=$result_div?>"></div>
<div class="form-group">
<label for="photo" class="col-lg-2 control-label">Photo</label>
<div class="col-lg-10">
<input type="file" class="form-control" id="photo" placeholder="Photo">
</div>
</div>
I'm looking for an answer for this already two days. I hope you help me.
So I have my index html code:
<div class="container-fluid" ng-controller="citizensController as citizensCtrl">
<h1>Moradores</h1>
<hr>
<uib-tabset active="activeForm">
<!-- INICIO TAB 1 -->
<uib-tab index="0" heading="Novo">
<div class="animated fadeIn" data-ng-include='"templates/pages/citizens/form.html"'></div>
</uib-tab>
<!-- INICIO TAB NOVO -->
<uib-tab index="1" heading="Relatório" ng-click="citizensCtrl.reportTab()">
<div id="grid-citizens" ui-grid="citizensCtrl.gridOptions" class="grid" ng-if=" citizensCtrl.gridOptions.data"></div>
</uib-tab>
<!-- INICIO TAB 3 -->
<uib-tab index="2" heading="Visão">
Some Tab Content
</uib-tab>
</uib-tabset>
</div>
and this is the form html code:
<form name="citizenForm" ng-submit="citizensCtrl.createCitizen(citizenForm)" class="css-form" novalidate>
<div class="form-group">
<label for="citizen_name">Nome *</label>
<input type="text" class="form-control" id="citizen_name" placeholder="Nome" ng-model="citizensCtrl.citizen.name" required>
</div>
<div class="form-group">
<label for="citizen_birthday">Nascimento *</label>
<uib-datepicker ng-model="citizensCtrl.citizen.birthday" class="well well-sm" datepicker-options="citizensCtrl.dateOptions" required></uib-datepicker>
</div>
<div class="form-group">
<label for="citizen_cell_phone">Celular *</label>
<input type="text" class="form-control" id="citizen_cell_phone" placeholder="Celular" ng-model="citizensCtrl.citizen.cell_phone" mask='(99) 9?9999-9999' mask-restrict="reject" mask-clean="true" required>
</div>
<div class="form-group">
<label for="citizen_phone">Telefone *</label>
<input type="text" class="form-control" id="citizen_phone" placeholder="Telefone" ng-model="citizensCtrl.citizen.phone" mask='(99) 9999-9999' mask-restrict="reject" mask-clean="true" required>
</div>
<hr>
<h4>Endereço</h4>
<div class="form-group">
<label for="citizen_address_district">Bairro *</label>
<select id="citizen_address_district" ng-model="citizensCtrl.citizen.address.district" class="form-control"
ng-options="district as district.name for district in citizensCtrl.districts" ng-change="citizensCtrl.getAddresses()" required>
<option value=""> Bairro</option>
</select>
</div>
<div class="form-group">
<label for="citizen_address_public_place">Rua *</label>
<input type="text" ng-model="citizensCtrl.citizen.address.public_place" id="citizen_address_public_place"
uib-typeahead="address as address.public_place for address in citizensCtrl.addresses | filter:{public_place: citizensCtrl.citizen.address.public_place} | limitTo:5"
typeahead-min-length="6" typeahead-select-on-exact="true"
typeahead-on-select="citizensCtrl.getZipCodes()"
typeahead-loading="loadingLocations"
ng-disabled="!citizensCtrl.citizen.address.district.id"
typeahead-no-results="noResults" class="form-control" required>
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
<div ng-show="noResults">
<i class="glyphicon glyphicon-remove"></i> Endereço não encontrado
</div>
</div>
<div class="form-group">
<label for="citizen_address_zip_code">CEP *</label>
<select id="citizen_address_zip_code" ng-model="citizensCtrl.citizen.address.zip_code"
ng-disabled="!citizensCtrl.citizen.address.public_place.id" class="form-control"
ng-options="zip_code as zip_code.number for zip_code in citizensCtrl.zip_codes" required>
<option value="">CEP</option>
</select>
</div>
<div class="form-group">
<label for="citizen_address_number">Numero *</label>
<input type="text" class="form-control" id="citizen_address_number" placeholder="Numero" ng-model="citizensCtrl.citizen.address.number" mask='99999999' mask-restrict="reject" mask-validate="false" required>
</div>
<div class="form-group">
<label for="citizen_address_complement">Complemento</label>
<input type="text" class="form-control" id="citizen_address_complement" placeholder="Complemento" ng-model="citizensCtrl.citizen.address.complement">
</div>
<input type="submit" class="btn btn-primary" value="Criar" />
<input type="reset" class="btn btn-default" ng-click="citizensCtrl.defineCitizen(); citizenForm.$setPristine()" value="Limpar Formulário" />
</form>
and this is the function triggered in my AngularJs controller for that:
self.createCitizen = function(form){
if(form.$valid){
$http.post(apiUrl + endpoint, angular.extend({},self.citizen)).then(function(response){
alertsService.add('success', 'Morador criado com sucesso!');
form.$setPristine();
self.defineCitizen();
}, function(error){
alertsService.add('danger', 'Oops.. Alguma coisa deu errado. Contate o administrador.');
});
}else{
alertsService.add('danger', 'Você precisa preencher todos os campos obrigatórios.');
}
};
Well, my problem occurs when I submit the formulary with some error like required items.
Then the css changes to show what is missing.
In this moment if I change the tab and go back to the formulary tab again the inputs should lose the css with errors, but my formulary is keeping dirty or something like that.
My solution was to set a ng-if in form looking to guide users are. If you leave the tab "Create tab" form is deleted because of ng-if. So when I go back to the "create" tab again, it is rebuilt.
I am a newb to programming, this is my first question here.
I have a bootstrap modal that opens up to a Contact Us form. In Firefox, the form submits postback as expected. In IE 11 clicking the send button just hangs, nothing. The close window buttons work as do the required attributes for text input fields.
I have seen other similar questions, but I am not missing name attributes on any field or button. I am also not duplicating the type="submit" attributes in the tag. I have experimented with using button type="submit" and every other way I can think of doing it. The modal and form elements all work except for the submission. The button behaves as though it is being clicked but nothing changes, nothing is submitted. Any help would be terrific!
Relevant Code:
<form class="form-horizontal" method="post" name="PortalContactUsForm" id="PortalContactUsForm">
<input type="submit" form="PortalContactUsForm" name="SendEmailButton" id="SendEmailButton" class="btn btn-primary" value="Send">
The complete Modal and form code:
<div id="myPortalModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myPortalModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" name="ModalCloseButton" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="myPortalModalLabel">Contact Us</h3>
</div>
<div class="modal-body">
<h4>Send <cfoutput>#sub_merchant.companyname#</cfoutput> an email by filling out the form below.</h4><br>
<form class="form-horizontal" method="post" name="PortalContactUsForm" id="PortalContactUsForm">
<div class="control-group">
<label class="control-label" for="Account" name="lblAccount" id="lblAccount" form="PortalContactUsForm">Account</label>
<div class="controls">
<input type="text" form="PortalContactUsForm" name="Account" id="Account" value="<cfoutput>#customer.account#</cfoutput>" readonly>
</div>
</div>
<div class="control-group">
<label class="control-label" for="FirstName" name="lblFirstName" id="lblFirstName" form="PortalContactUsForm">First Name</label>
<div class="controls">
<input type="text" form="PortalContactUsForm" name="FirstName" id="FirstName" value="<cfoutput>#customer.firstname#</cfoutput>" readonly>
</div>
</div>
<div class="control-group">
<label class="control-label" for="LastName" name="lblLastName" id="lblLastName" form="PortalContactUsForm">Last Name</label>
<div class="controls">
<input type="text" form="PortalContactUsForm" name="LastName" id="LastName" value="<cfoutput>#customer.lastname#</cfoutput>" readonly>
</div>
</div>
<div class="control-group">
<label class="control-label" for="Email" name="lblEmail" id="lblEmail" form="PortalContactUsForm">Your Email</label>
<div class="controls">
<input type="email" form="PortalContactUsForm" name="Email" id="Email" value="<cfoutput>#customer.email#</cfoutput>">
</div>
</div>
<div class="control-group">
<label class="control-label" for="ConfirmEmail" name="lblConfirmEmail" id="lblConfirmEmail" form="PortalContactUsForm">Confirm Email</label>
<div class="controls">
<input type="email" form="PortalContactUsForm" name="ConfirmEmail" id="ConfirmEmail" value="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="PhoneNum" name="lblPhoneNum" id="lblPhoneNum" form="PortalContactUsForm">Your Phone</label>
<div class="controls">
<input type="tel" form="PortalContactUsForm" name="PhoneNum" id="PhoneNum" value="<cfoutput>#customer.phone#</cfoutput>">
</div>
</div>
<div class="control-group">
<label class="control-label" for="MsgBody" name="lblMsgBody" id="lblMsgBody" form="PortalContactUsForm">Questions/Comments</label>
<div class="controls">
<textarea rows="3" form="PortalContactUsForm" name="MsgBody" id="MsgBody" placeholder="No html here, just plain text please." required></textarea>
</div>
</div>
<div class="control-group pull-right">
<label class="checkbox">
<input type="checkbox" form="PortalContactUsForm" name="SendCCCheckbox" id="SendCCCheckbox">
Check this box to receive a copy of this email at the address above.
</label>
</div>
<cfoutput>
<input type="hidden" form="PortalContactUsForm" name="postback" id="postback" value="true">
<input type="hidden" form="PortalContactUsForm" name="mailsend" id="mailsend" value="true">
<input type="hidden" form="PortalContactUsForm" name="lname" id="lname" value="#trim(form.lname)#">
<input type="hidden" form="PortalContactUsForm" name="zip" id="zip" value="#(len(trim(form.zip)) > 5 ? left(trim(replace(form.zip, "-", "", "all")), 5) : trim(form.zip))#">
<input type="hidden" form="PortalContactUsForm" name="pin" id="pin" value="#trim(replacelist(pin, "-, ", ""))#">
</cfoutput>
</form>
</div>
<div class="modal-footer">
<button class="btn" name="CloseModalButton" data-dismiss="modal" aria-hidden="true">Close</button>
<input type="submit" form="PortalContactUsForm" name="SendEmailButton" id="SendEmailButton" class="btn btn-primary" value="Send">
</div>
</div>