I am trying to find a way to change the color of text in a form as a result of passing a validation by another JavaScript function. Is there an easy way to do this?
Example of the element I want to update the color for:
<form name="contact" method="post" action="send_form_email.php" novalidate>
<div class="row">
<div class="col">
<label for="nameInput">Name:*</label>
<input name="name" type="text" class="form-control" id="nameInput" placeholder="E.g. Alan Turing" oninput="bootstrapValidate('#nameInput', 'required:Please fill out this field')">
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<label for="emailInput">Email:*</label>
<input name="email" type="email" class="form-control" id="emailInput" placeholder="E.g. name#domain.com" oninput="bootstrapValidate('#emailInput', 'email:Enter a valid E-Mail!|required:Please fill out this field')">
</div>
<div class="col-sm-12 col-md-6">
<label for="telInput">Telephone:</label>
<input name="tel" type="tel" class="form-control" id="telInput" placeholder="E.g. (01452) 714 xxx">
</div>
</div>
<div class="form-group">
<label for="msgInput">Message:*</label>
<textarea name="msg" class="form-control" id="msgInput" placeholder="E.g. Hello world!" oninput="bootstrapValidate('#msgInput', 'required:Please fill out this field')"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
For example document. GetElementById('msgInput').style.color='#ABC666';
Another way is to toglle a class containing a rule like so:
JS: document. GetElementById('msgInput').classList.add('valid');
CSS: .valid { color: #ABC666; }
Aforementioned JS code has to be placed in the event listener.
You can add CSS class to your element:
// styles.css
.warning {
color: red;
}
// scripts.js
document.getElementById('msgInput').classList.add('warning');
Related
Im using meteor JS and try to implement a summernote.
The problem is, when i try to open a summernote with my data, it work just sometimes.
when i charge the page for the first time, nothing appears in the summernote, but if i change something in my code and save it, the content will appear in the summernote.
please, help me :'(
<template name="consigneModif">
<div class="container">
<div class = "col text-center">
<h1>Modification de {{{this.Name}}}</h1>
</div>
<form class="formConsigne">
<div class="form-group">
<label for="Description"><h4>Nom :</h4></label>
<textarea class="summernote" id="Name" name="Name">{{{this.Name}}}</textarea>
</div>
<div class="form-group">
<label for="Description"><h4>Description :</h4></label>
<textarea class="summernote" id="Description" name="Description" rows="3">{{{this.Description}}}</textarea>
</div>
<div class="form-group">
<label for="Condition"><h4>Condition d'application de la consigne : </h4></label>
<textarea class="summernote" id="Condition" name = "Condition" rows="3">{{{this.Condition}}}</textarea>
</div>
<div class="form-group">
<label for="Mode"><h4>Mode opératoire :</h4></label>
<textarea class="summernote" id="Mode" name ="Mode" rows="3">{{{this.Mode}}}</textarea>
</div>
<div class="form-group">
<label for="Date"><p>Date effective :</p></label>
<input type="Date" id="Date" name = Date>
</div>
<div class="form-group">
<label for="DateFin"><p>Date de fin :</p></label>
<input type="Date" id="DateFin" name = DateFin>
</div>
<div>
<button type="submit" class ="btn btn-success" id="AddConsignButton">Modifier</button>
</div>
</form>
</div>
{{>footerNavbar}}
<script>
$('.summernote').summernote('code');
</script>
</template>
I think the issue is with the script tag you are using to activate the summernote. It should work if you use the onRender method of the template instead.
This may work:
Template.consigneModif.onRendered(function () {
this.$('.summernote').summernote('code');
});
I have a simple form that registers the informations in a MailChimp's list. I want to disable the Submit button if the input fields weren't filled yet.
<div class="demo" data-ng-if="demo && !register">
<form action="MAILCHIMP_ADDRESS" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate demoform" data-ng-init="demoUser = {}" target="_blank" autocomplete="off" novalidate>
<div class="control-group">
<div class="form-group">
<input type="email" name="EMAIL" data-ng-model="demoUser.email" class="form-control" placeholder="Insira seu e-mail profissional">
</div>
</div>
<div class="control-group">
<div class="form-group">
<input type="text" name="EMPRESA" data-ng-model="demoUser.empresa" class="form-control" placeholder="Insira sua empresa">
</div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0a5d36c63e174c949789feea5_200f88e472" tabindex="-1" value=""></div>
<div class="clear pull-right">
<button type="submit" class="btn btn-outline-light" data-ng-disabled="mc-embedded-subscribe-form.$invalid" data-ng-click="demoLogin(demoUser)">Enviar</button>
</div>
</form>
</div>
What am I doing wrong here?
This is because you are using a hyphen in the name of your form.
Its a known issue explained here also stated here.
So you will have to change your form name to myFormor something without a hyphen.
data-ng-disabled="myForm.$invalid"
check this plunker the one form with the hyphen is not working, the other does
so I'm having a weird problem that I haven't encountered before. My code is the following:
<div class="row">
<div class="col-md-12">
<h4>Send message to seller</h4>
<div class="panel panel-default">
<div class="panel-body">
<form action="#" method="POST">
<div class="form-group">
<label for="InputEmail">Email address</label>
<input type="email" class="form-control" id="InputEmail" placeholder="Enter your email" >
</div>
<div class="form-group">
<label for="InputText">Your text</label>
<textarea class="form-control" id="InputText" name="message" placeholder="Type in your message" rows="5" style="margin-bottom:10px;"></textarea>
</div>
<button class="btn btn-info" type="submit">Send</button>
</form>
</div>
</div>
</div>
</div>
When I run it on the server, this is the result, and it is really annoying:
<div class="form-group">
<label for="InputEmail">Email address</label>
<div class="has-placeholder form-control"><label>Enter your email</label><input type="email" class="form-control" id="InputEmail"></div>
For the second code, I omitted the rest of the code. As you can see, it adds a new and a new with a class of place-holer.
I have 2 versions of this file. Full HTML, and one with PHP etc.. The HTML version is just fine, but this one, for some reason, has this result. Can anyone explain to my why this is happening.
I have looked in the js files that are being included and cannot find anything regarding that added class and what not.
Thanks.
Your this html code is just perfect. Probably you missed some tag in php file. Can you please post your php code so that we can sorted it out.
Thanks
I have to check validation on two fields with ng-change. The selected values cannot be same so i have implemented below logic but this function is not even being called. Its been hours and i cannot figure out what i am doing wrong. Please check if logic is being implemented correctly.
So far tried code....
main.html
<div class="panel-body">
<form name="addAttesForm" id="addAttesForm" novalidate k-validate-on-blur="false">
<div class="row">
<div class="form-group col-md-6">
<label for="roleType" class="col-md-4">Role Type:</label>
<div class="col-md-8">
<select
kendo-drop-down-list
data-text-field="'text'"
data-value-field="'id'" name="roleType"
k-option-label="'Select'"
k-data-source="roleTypeDataSource"
ng-model="attestorDTO.riskAssessmentRoleTypeKey"
id="roleType">
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="attestorWorker" class="col-md-4">Attestor:</label>
<div class="col-md-8">
<input type="text" class="form-control" id="attestorWorker" required
ng-model="attestorDTO.attestorWorker" name="attestorWorker"
ng-change="validateProxy('attestorWorker','proxyWorker')"
ng-model-options="{updateOn: 'blur'}"
ng-click="openAttestorSearch()" readonly="readonly"/>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="proxyWorker" class="col-md-4">Proxy :</label>
<div class="col-md-8">
<input type="text" class="form-control" id="proxyWorker" required
ng-model="attestorDTO.proxyWorker" name="proxyWorker"
ng-model-options="{updateOn: 'blur'}"
ng-click="openProxySearch()" ng-disabled="!attestorDTO.attestorWorker" ng-change="validateProxy('attestorWorker','proxyWorker')" readonly="readonly"/>
<p class="text-danger" ng-show="addAttesForm.proxyWorker.$error.dateRange">Attestor and Proxy can not be same</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button class="btn btn-primary pull-right" type="button" ng-disabled="addAttesForm.$invalid" ng-click="saveAttestor()">Add attestor</button>
</div>
</div>
</form>
</div>
main.js
$scope.validateProxy = function(startField, endField) {
console.log("calling validation...");
var isValid = ($scope.attestorDTO[startField]) <= ($scope.attestorDTO[endField]);
$scope.addAttesForm[endField].$setValidity('dateRange',isValid);
$scope.addAttesForm.$setValidity('dateRange',isValid);
};
Remove the readonly attribute. ng-change will not fire on the readonly input elements and the model should be changed via the UI not by the javascript code.
Try like this:
<input type="text" class="form-control" id="attestorWorker" required
ng-model="attestorDTO.attestorWorker" name="attestorWorker"
ng-change="validateProxy('attestorWorker','proxyWorker')"
ng-model-options="{updateOn: 'blur'}"
ng-click="openAttestorSearch()" />
<input type="text" class="form-control" id="proxyWorker" required
ng-model="attestorDTO.proxyWorker" name="proxyWorker"
ng-model-options="{updateOn: 'blur'}"
ng-click="openProxySearch()" ng-disabled="!attestorDTO.attestorWorker" ng-change="validateProxy('attestorWorker','proxyWorker')" />
I am trying to implement a form within a bootstrap popover; but i cannot seem to be able to align them both. The form elements move out side the popover ; the solution should make the popover adjust according to the size of the form elements. Please help.
HTML:
<br> <br> <br>
<div class="popover-markup">Popover link
<div class="head hide"> Events </div>
<div class="content hide">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn pull-left">Sign in</button>
</div>
</div>
</form>
</div>
Javascript:
$('.popover-markup>.trigger').popover({
html : true,
title: function() {
return $(this).parent().find('.head').html();
},
content: function() {
return $(this).parent().find('.content').html();
}
});
here's the fiddle.
http://jsfiddle.net/MgcDU/6524/
Okay so i found a solution which is basically that i wasn't using the form tags in the body before the form horizontal div. But even if i do that; my fields aren't inline fields. Can anyone suggest a solution to that?
Change the form-horizonal to "form-inline" and to be safe you can also add a style to override the popvoer style. I have tried it and its working.
.popover {
max-width: 800px;
width: auto;