I am having trouble with displaying required error messages in one of my pages.
HTML :
<div ng-form="editReservationForm">
<form id="edit-profile" novalidate name="editReservationForm" autocomplete="off" class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label" for="reservation.employee.firstName">First Name<sup>*</sup></label>
<div class="controls">
<input class="span4" name="reservation.employee.firstName" placeholder="First Name" ng-model="reservation.employee.firstName" disabled />
</div> <!-- /controls -->
</div> <!-- /control-group -->
<div class="control-group">
<label class="control-label" for="reservation.employee.lastName">Last Name<sup>*</sup></label>
<div class="controls">
<input class="span4" name="reservation.employee.lastName" placeholder="Last Name" ng-model="reservation.employee.lastName" disabled />
</div> <!-- /controls -->
</div>
<div class="control-group">
<label class="control-label" for="reservation.reservedFrom">Reserved From<sup>*</sup></label>
<div class="controls input-group date" data-provide="datepicker">
<input class="form-control" type="text" name="startDate" core-date-picker ng-model="reservation.reservedFrom" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
<span style="color:red">{{errMessageFrom}}</span>
</div> <!-- /controls -->
</div> <!-- /control-group -->
<div class="control-group">
<label class="control-label" for="reservation.reservedTill">Reserved Till<sup>*</sup></label>
<div class="controls input-group date" data-provide="datepicker">
<!--<input type="text" style="width:150px" class="span4" name="reservedTill" placeholder="Reserved Till" data-ng-model="reservation.reservedTill"
validator="required" required-error-message="Date is required" valid-method="watch" id="endDate" ng-change='checkErr()' />-->
<input class="form-control" type="text" name="EndDate" core-date-picker ng-model="reservation.reservedTill" ng-change='checkErr()' id="endDate1" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
<span style="color:red">{{errMessageTo}}</span>
</div> <!-- /controls -->
</div> <!-- /control-group -->
<!--DATE PICKER-->
<div class="control-group">
<label class="control-label" for="reservation.account.name" >Account Name<sup>*</sup></label>
<div class="controls">
<select ng-model="reservation.account.id" required>
<option ng-repeat="p in accounts" value="{{p.id}}" required>{{p.name}}</option>
</select>
</div> <!-- /controls -->
</div> <!-- /control-group -->
<!--<div class="control-group">
<label class="control-label" for="reservation.poc.name">POC Name</label>
<div class="controls">
<select ng-model="reservation.poc.id">
<option ng-repeat="p in pocs" value="{{p.id}}">{{p.name}}</option>
</select>
</div> <!-- /controls -->
<!--</div>--> <!-- /control-group -->
<div class="control-group">
<label class="control-label" for="reservation.remark" >Remarks : <sup>*</sup></label>
<div class="controls">
<input type="text" required id="remarksText" class="span4" name="reservation.remark" placeholder="Enter your remarks here" ng-model="reservation.remark" />
</div> <!-- /controls -->
</div> <!-- /control-group -->
<div class="form-actions">
<button type="button" class="btn btn-primary" validation-submit="editReservationForm" ng-click="updateReservation()">Save</button>
<button ng-click="cancel()" class="btn">Cancel</button>
</div> <!-- /form-actions -->
</fieldset>
</form>
</div>
I have added the required tag along with all input fields but upon click of 'Save' button, the error messages that show 'This field is required' is not shown. The function is not getting called though.
I need help in finding the cause of this issue.
Keep the novalidate in the <form> tag.
Try changing required to ng-required="true".
ng-required works with ng-model. So make sure that ng-model exists in your input tag. (additional info)
Try adding
<span style="color:red" ng-show="editReservationForm.inputFieldName.$invalid && editReservationForm.inputFieldName.$touched">
Required field.
</span>
where inputFieldName is the respective name attribute.
This adds for better effect although you'll need to import angular-animate.min.js and add it as a dependency too.
Related
I am having tremendous trouble taking my test state version of my mailchimp opt-in and applying it to my website (built on the weebly platform).
My Goal: Creating a custom Mailchimp Opt-in form on Weebly.
Problem: Test version (locally hosted) of opt-in utterly fails on Production version (weebly platform).
I think one library or another is getting overridden. Perhaps the mailchimp CDN, but not sure.
Libraries used:
Bootstrap
FontAwesome
Mailchimp CDN
I am adding it to my weebly site using the code embed snippet tool. Which is probably adding another layer of complexity to the functionality.
Here is my opt-in form code:
<!-- FontAwesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!-- Begin MailChimp Signup Form -->
<link href="http://cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style type="text/css">
#mc_embed_signup {
background:#283184;
color: white;
clear:left;
font:19px Helvetica,Arial,sans-serif;
width: 800px;
padding: 20px;
border-radius: 15px;
}
.btn {
background-color: #339bff;
color: white;
margin-top: 10px;
}
.label {
font: 28px;
}
.asterisk {
color: red;
}
</style>
<!-- container Body -->
<div id="mc_embed_signup" class="container">
<form action="https://silverlinkfunding.us17.list-manage.com/subscribe/post?u=459fcc96e094a6b4dbe3e69f8&id=4afd1b9608" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2 class="text-center"><b>Apply Now</b></h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<!-- Name Row -->
<div class="row form-group">
<div class="col-sm-6 mc-field-group">
<div class="row">
<div class="col-sm-12">
<label for="mce-FNAME">First Name<span class="asterisk">*</span>
</label>
<input type="text" class="form-control required" value="" id="mce-FNAME" name="FNAME" aria-describedby="firstName" placeholder="Enter First Name">
</div>
</div>
</div>
<div class="col-sm-6 mc-field-group">
<div class="row">
<div class="col-sm-12">
<label for="mce-LNAME">Last Name<span class="asterisk">*</span>
</label>
<input type="text" class="form-control required" value="" id="mce-LNAME" name="LNAME" aria-describedby="lastName" placeholder="Enter Last Name">
</div>
</div>
</div>
</div>
<!-- Email Row -->
<div class="row form-group">
<div class="col-sm-12 mc-field-group">
<div class="row">
<div class="col-sm-12">
<label for="mce-EMAIL"><i class="fas fa-envelope"></i> Email Address<span class="asterisk">*</span>
</label>
<input type="text" class="form-control required" value="" id="mce-EMAIL" name="EMAIL" aria-describedby="email" placeholder="YourEmail#Domain.com">
</div>
</div>
</div>
</div>
<!-- Phone Row -->
<div class="row form-group">
<div class="col-sm-12 mc-field-group">
<div class="row">
<div class="col-sm-12">
<label for="mce-MMERGE3"><i class="fas fa-phone"></i> Phone <span class="asterisk">*</span>
</label>
<input type="text" class="form-control required" value="" name="MMERGE3" id="mce-MMERGE3" aria-describedby="phone" placeholder="(xxx) xxx-xxxx">
</div>
</div>
</div>
</div>
<!-- Business, City, State Row -->
<div class="row form-group">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6 mc-field-group">
<label for="mce-MMERGE4"><i class="fas fa-briefcase"></i> Business Name<span class="asterisk">*</span>
</label>
<input type="text" class="form-control required" value="" id="mce-MMERGE4" name="MMERGE4" aria-describedby="businessname" placeholder="My Businesss LLC">
</div>
<div class="col-sm-4 mc-field-group">
<label for="mce-MMERGE5"><i class="fas fa-city"></i> City<span class="asterisk">*</span>
</label>
<input type="text" class="form-control required" value="" id="mce-MMERGE5" name="MMERGE5" aria-describedby="city" placeholder="Enter City Name">
</div>
<div class="col-sm-2 mc-field-group">
<label for="mce-MMERGE9"><i class="fas fa-map-pin"></i> State<span class="asterisk">*</span>
</label>
<input type="text" class="form-control required" value="" id="mce-MMERGE9" name="MMERGE9" aria-describedby="state" placeholder="">
</div>
</div>
</div>
</div>
<!-- Phone Row -->
<div class="row form-group">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6 mc-field-group">
<label for="mce-MMERGE7">Loan Amount Requested <span class="asterisk">*</span>
</label>
<input type="text" class="form-control required" value="" name="MMERGE7" class="required" id="mce-MMERGE7" placeholder="$xx,xxx">
</div>
<div class="col-sm-6 mc-field-group">
<label for="mce-MMERGE8">Cash Available For Investment <span class="asterisk">*</span>
</label>
<input type="text" class="form-control required" value="" name="MMERGE8" class="required" id="mce-MMERGE8" placeholder="$xx,xxx">
</div>
</div>
</div>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_459fcc96e094a6b4dbe3e69f8_4afd1b9608" tabindex="-1" value=""></div>
<div class="clear d-flex justify-content-center"><input type="submit" value="Apply Now" name="subscribe" id="mc-embedded-subscribe" class="button btn" onclick="window.open('https://www.silverlinkfunding.com/thank-you-application.html')"></div>
</div>
</form>
</div>
<script type='text/javascript' src='http://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[0]='EMAIL';ftypes[0]='email';fnames[3]='MMERGE3';ftypes[3]='phone';fnames[4]='MMERGE4';ftypes[4]='text';fnames[7]='MMERGE7';ftypes[7]='text';fnames[8]='MMERGE8';ftypes[8]='text';fnames[5]='MMERGE5';ftypes[5]='text';fnames[9]='MMERGE9';ftypes[9]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
Test State (on local machine):
Form validation works - stays on page onclick and alerts various form
windows which don't meet validation.
Form opts in successfully to mailchimp
Form redirects to /thank-you-application page
Production State (hosted on weebly):
Form validation Fails
Form validation doesn't stop redirect to thank you page
several fontawesome icons fail
Currently live version of the opt-in form: https://www.silverlinkfunding.com/color-me-mine.html
My Questions:
Is a library getting overridden?
Is Something on weebly overriding everything?
Did I just code it wrong?
Am I calling the CDN's or libraries improperly?
I really appreciate your help!
In your console you should be able to see four warnings like the one below:
[blocked] The page at https://www.silverlinkfunding.com/color-me-mine.html was not allowed to run insecure content from http://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js.
Perhaps you could try loading those files over https to see if this solves the issue concerning MailChimp.
I have this modal which dont have form tag. But i want to validate all the elements inside before user proceed with clicking on any of these two buttons.
<div id="modal-invoice-member" class="modal fade" data-backdrop="static">
<!-- Modal Dialog -->
<div class="modal-dialog">
<!-- Modal Content -->
<div class="modal-content">
<!-- Modal Body -->
<div class="modal-body remove-padding">
<!-- Modal Tabs -->
<div class="block-tabs block-themed">
<div class="block-options">
×
</div>
<ul class="nav nav-tabs" data-toggle="tabs">
<li class="active"><i class="gi gi-user"></i> Member Details</li>
</ul>
<div class="tab-content">
<!-- Account Tab Content -->
<div class="tab-pane active" id="modal-invoice-member-data">
<div class="form-group">
<label class="control-label col-md-3">Name<span style="color:red">*</span></label>
<div class="col-md-8" >
<input type="text" style="text-transform: capitalize;" name="name" ng-model="user.name" class="form-control input" placeholder="First... Last... Middle..." required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" >Contact<span style="color:red">*</span></label>
<div class="col-md-4">
<div class="input-group ">
<input type="text" ng-pattern="/^[7-9][0-9]{9}$/" style="text-transform: capitalize;" name="mobile" ng-model="user.mobile" class="form-control digits" maxlength="10" placeholder="Mobile" required>
</div>
</div>
<div class="col-md-4" >
<div class="input-group ">
<input type="text" name="email" ng-model="user.email" class="form-control input" placeholder="Email" required>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Gender<span style="color:red">*</span></label>
<div class="col-md-9" style="top:5px;">
<label class="col-md-3" for="gender">
<input type="radio" id="gender" name="gender" ng-model="user.gender" value="F" required=""> Female
</label>
<label class="col-md-3" for="gender">
<input type="radio" id="gender" name="gender" ng-model="user.gender" value="M" ng-checked="true" required=""> Male
</label>
<label class="col-md-3" for="gender">
<input type="radio" id="gender" name="gender" ng-model="user.gender" value="O" required=""> Other
</label>
</div>
</div>
</div>
<!-- END Account Tab Content -->
</div>
</div>
<!-- END Modal Tabs -->
</div>
<!-- END Modal Body -->
<!-- Modal footer -->
<div class="modal-footer">
<button class="btn btn-success" type="submit" ng-click="saveMember()"><i class="fa fa-check"></i> Save</button>
<button class="btn btn-warning" data-dismiss="modal" ng-click="addItem()"><i class="fa fa-plus"></i> Add Item</button>
</div>
<!-- END Modal footer -->
</div>
<!-- END Modal Content -->
</div>
<!-- END Modal Dialog -->
I want to all fields to get filled before user click on any buttons. Border color should get red when there is an empty element .
New idea also welcome .
Thank you
I having trouble for adding a multiple Sub Author in my form, I have a form that you can add a sub author. The code works if I only submit one sub author but if multiple sub author the codes not working.
Here's the code of my text box in FormAddBook.
<input type="text" class="form-control" placeholder="Sub Authors" name="SubAuthors[]" maxlength="50" />
And when you want to add another sub author, text box will appear when yun click the Add Sub Author with the same name of textbox.
The codes work when one sub author only but if multiple sub authors the codes not working.
Here's the code of my jquery.
$.ajax({
type: 'POST',
url: 'proc/exec/exec-insert-book.php',
data: $('#FormAddBook').serialize(),
});
Does the Serialize cannot recognize the another text box?
Sorry for my bad english.
Here's the HTML Form code.
<form id="FormAddBook">
<div class="modal-body">
<div class="row">
<div class="col-lg-6 hide" >
<label>Accession No:</label>
<div class="form-group">
<input type="text" class="form-control" placeholder="Accession No" name="AccessionNo" readonly/>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label>ISBN:</label>
<input type="text" class="form-control" placeholder="ISBN" name="BookISBN" maxlength="20" />
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Date Book Added:</label>
<div id="DateBookAdded" class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" placeholder="Date Book Added" name="DateBookAdded" readonly/>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Archived Date Extension:</label>
<div id="BookAuthLast" class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" placeholder="" name="ArchivedDateExt" readonly/>
</div>
</div>
</div>
<div id="subauthcont">
<div class="subAuthors col-lg-12">
<div class="form-group">
<label>Sub authors:</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Sub Authors" name="SubAuthors[]" maxlength="50" />
<span class="input-group-btn" disabled>
<button id="btnAddSubAuth" class="btn btn-info" type="button" ><i class="fa fa-user" aria-hidden="true"></i></button>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="form-group">
<label>Subject:</label>
<select class="form-control" name="Description">
<option>Generalities</option>
<option>Philosophy and Psychology</option>
<option>Religion</option>
<option>Social Science</option>
<option>Languages</option>
<option>Science</option>
<option>Technology</option>
<option>Arts and Recreation</option>
<option>Literature</option>
<option>Geography and History</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label>Status:</label>
<select class="form-control" name="Status" readonly>
<option>Available</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="btnSave2" type="submit" class="btn btn-primary asd">Save</button>
</div>
</form>
</div>
I used bootstrap to return feedback to user about upload result.
So when the upload go well I use green success feedback, otherwise I return red error feedback.
But if he push browse button I would like to return to no feedback input tag, how can i do it?
This is part of my code:
<form class="input-group col-xs-12" method="post"
enctype="multipart/form-data" th:action="#{/file/excelFileRead}">
<div class="btn btn-primary btn-file col-xs-2">
<!-- Using accept the browse window allows only excel files -->
Browse… <input type="file" name="file"
accept=".xls, .xlsx, .xlsm" />
</div>
<!-- Manage success message -->
<div th:if="${opened == 'true'}">
<div class="form-group has-success has-feedback col-xs-8">
<input type="text" class="form-control" readonly="readonly"
id="inputSuccess2" aria-describedby="inputSuccess2Status"
th:value="${fileName}"> <span
class="glyphicon glyphicon-ok form-control-feedback"
aria-hidden="true"></span> <span id="inputSuccess2Status"
class="sr-only">(success)</span>
<label class="control-label"
for="inputSuccess2" th:text="${successMessage}"></label>
</div>
</div>
<div th:if="${opened == 'false'}">
<div class="form-group has-error has-feedback">
<input type="text" class="form-control" readonly="readonly"
id="inputError2" th:value="${fileName}"
aria-describedby="inputError2Status"> <label
class="control-label" for="inputError2"
th:text="${errorMessage}"></label> <span
class="glyphicon glyphicon-remove form-control-feedback"
aria-hidden="true"></span> <span id="inputError2Status"
class="sr-only">(error)</span>
</div>
</div>
<!-- <div th:if="${opened == null}">
<div class="col-xs-8">
<input type="text" class="form-control" readonly="readonly"
th:value="${fileName}" />
</div>
</div>-->
<div class="col-xs-2">
<input type="submit" class="btn btn-info" value="Open" />
</div>
</form>
I have this form:
name....
amount....
remaining....
[submit]
I am using the following code:
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Form Name</legend>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="name">name</label>
<div class="controls">
<input id="name" name="name" type="text" placeholder="name" class="input-xlarge">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="amount">Amount</label>
<div class="controls">
<input id="amount" name="amount" type="text" placeholder="$" class="input-xlarge">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Remaining">Remaining</label>
<div class="controls">
<input id="Remaining" name="Remaining" type="text" placeholder="$" class="input-xlarge">
</div>
</div>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="singlebutton">Submit</label>
<div class="controls">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
I expect the result like this:
customer (name) has submitted (20$). remaining amount is (30$)
How can I get this with out using PHP/CGI etc and only JavaScript. Preferably in a new window with a print button.
I removed "form" tag, because i assume we will use only client programming, so form submission is not needed. this script below may help you.
<fieldset>
<!-- Form Name -->
<legend>Form Name</legend>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="name">name</label>
<div class="controls">
<input id="name" name="name" type="text" placeholder="name" class="input-xlarge">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="amount">Amount</label>
<div class="controls">
<input id="amount" name="amount" type="text" placeholder="$" class="input-xlarge">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Remaining">Remaining</label>
<div class="controls">
<input id="Remaining" name="Remaining" type="text" placeholder="$" class="input-xlarge">
</div>
</div>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="singlebutton">Submit</label>
<div class="controls">
<button id="singlebutton" name="singlebutton" class="btn btn-primary" onclick="return submit();">Submit</button>
</div>
</div>
</fieldset>
<div id="info"></div>
<script type="text/javascript">
function submit()
{
var name = document.getElementById("name").value;
var amount = document.getElementById("amount").value;
var remaining = document.getElementById("Remaining").value;
document.getElementById("info").innerHTML = "customer ("+name+") has submitted ("+amount+"$). remaining amount is ("+remaining+"$)";
document.getElementsByTagName("fieldset")[0].style.display = 'none';
return false;
}
</script>
Try this may help you
<script>
var PrintMail = function () {
window.frames["print_frame"].document.body.innerHTML = document.getElementById("printArea").innerHTML;
window.frames["print_frame"].window.focus();
window.frames["print_frame"].window.print();
};
</script>
<div id="printArea">
Content that you want to print
</div>
<iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank">
</iframe>