I'm doing contact form here all name, email, phone number validations are working fine. but when I click to submit button alert is not working here I use ngMessage directive for validation.I just start learning angularjs.So, Is there any other alternate way for validation which is simple and have less code.
Help will be appreciated..
this is my code.
var app = angular.module('myApp', ['ngMessages']);
app.controller('nameController', function ($scope) {
$scope.submitForm = function() {
alert('Form submitted');
};
});
body { font: 12px Arial, Helvetica, sans-serif;}
.formbg {
width: 50%;
margin: 0 auto;
padding: 20px 20px 20px 20px;
color: #444444;
background: #4cb0db;
}
.formbg label {
display: block;
margin: 0px 0px 5px;
}
.formbg input[type="text"],
.formbg input[type="email"],
.formbg input[type="number"] {
width: 60%;
padding: 0px 0px 0px 5px;
border: 1px solid #C5E2FF;
height: 30px;
line-height:15px;
margin: 2px 6px 16px 0px;
border: 1px solid #C5E2FF;
background: #FBFBFB;
}
div{
display:inline-block;
vertical-align:top;
color: red;
margin-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js"></script>
<body ng-app="myApp">
<form name="Testform" ng-controller="nameController" class="formbg">
<label>First Name:</label>
<input type="text" name="userName" ng-model="firstName" required />
<div ng-messages="Testform.userName.$error">
<div ng-message="required">This field is required</div>
</div>
<label>Email Address:</label>
<input type="email" name="userEmail" ng-model="email" required />
<div ng-messages="Testform.userEmail.$error">
<div ng-message="required">This field is required</div>
<div ng-message="email">Your email address is invalid</div>
</div>
<label>Phone Number:</label>
<input type="number" name="userPhoneNumber" ng-model="phoneNumber" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" required/>
<div ng-messages="Testform.userPhoneNumber.$error">
<div ng-message="required">This field is required</div>
<div ng-message="pattern">Must be a valid 10 digit phone number</div>
</div>
<button type="submit"
ng-submit="Testform.$valid && submitForm()">Submit</button>
</form>
</body>
ng-submit should be on form tag instead of button
var app = angular.module('myApp', ['ngMessages']);
app.controller('nameController', function ($scope) {
$scope.submitForm = function() {
alert('Form submitted');
};
});
body { font: 12px Arial, Helvetica, sans-serif;}
.formbg {
width: 50%;
margin: 0 auto;
padding: 20px 20px 20px 20px;
color: #444444;
background: #4cb0db;
}
.formbg label {
display: block;
margin: 0px 0px 5px;
}
.formbg input[type="text"],
.formbg input[type="email"],
.formbg input[type="number"] {
width: 60%;
padding: 0px 0px 0px 5px;
border: 1px solid #C5E2FF;
height: 30px;
line-height:15px;
margin: 2px 6px 16px 0px;
border: 1px solid #C5E2FF;
background: #FBFBFB;
}
div{
display:inline-block;
vertical-align:top;
color: red;
margin-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js"></script>
<body ng-app="myApp">
<form name="Testform" ng-controller="nameController" class="formbg" ng-submit="submitForm()">
<label>First Name:</label>
<input type="text" name="userName" ng-model="firstName" required />
<div ng-messages="Testform.userName.$error">
<div ng-message="required">This field is required</div>
</div>
<label>Email Address:</label>
<input type="email" name="userEmail" ng-model="email" required />
<div ng-messages="Testform.userEmail.$error">
<div ng-message="required">This field is required</div>
<div ng-message="email">Your email address is invalid</div>
</div>
<label>Phone Number:</label>
<input type="number" name="userPhoneNumber" ng-model="phoneNumber" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" required/>
<div ng-messages="Testform.userPhoneNumber.$error">
<div ng-message="required">This field is required</div>
<div ng-message="pattern">Must be a valid 10 digit phone number</div>
</div>
<button type="submit"
>Submit</button>
</form>
</body>
In submit button Instead of ng-submit use ng-click.
Demo link
You can use below code,
<form name="Testform" ng-controller="nameController" class="formbg" ng-
submit="submitForm()">
.
.
<button type="submit">Submit</button>
app.controller('nameController', function ($scope) {
$scope.submitForm = function() {
if($scope.Testform.$valid == true)
{
alert('Form submitted');
}
else
{
alert('Form submit failed');
}
};
});
Related
Is it possible within a radio-group to change the style of a radio button that has not been checked after the other button has been checked?
I have 5 radio boxes. I gave a custom style to the checked ones with the :checked pseudo class. But when a control is checked I want the others to be less visible. I used the negation :not(:checked), but in case none of the controls is checked, all of them are less visible. I just want the unchecked controls of a radio-group to be less visible after another control of this group has been checked.
How can I do this with javascript or css?
The OP might make use of the :focus-within css pseudo class like demonstrated with the below provided example.
/*
fieldset:focus-within span {
opacity: .3;
}
fieldset:focus-within [type="radio"]:focus + span {
opacity: 1;
}
*/
fieldset:focus-within [type="radio"]:not(:checked) + span {
opacity: .3;
}
<form>
<fieldset>
<legend>1st radio group</legend>
<label>
<input type="radio" name="foo-bar"/>
<span>Foo</span>
</label>
<label>
<input type="radio" name="foo-bar" checked/>
<span>Bar</span>
</label>
<label>
<input type="radio" name="foo-bar"/>
<span>Baz</span>
</label>
</fieldset>
<fieldset>
<legend>2nd radio group</legend>
<label>
<input type="radio" name="bizz-buzz"/>
<span>Bizz</span>
</label>
<label>
<input type="radio" name="bizz-buzz"/>
<span>Booz</span>
</label>
<label>
<input type="radio" name="bizz-buzz" checked/>
<span>Buzz</span>
</label>
</fieldset>
</form>
The next provided example applies fixes and improvements (e.g. tab navigable, valid markup, no empty / or unnecessary decorating span elements) to the OP's codepen code.
body { zoom: .9; }
fieldset { margin: 0 0 5px 0; padding: 0; border: none; }
.insurance-container [type="radio"] {
/*
do not apply ... display: none; ...
for it will prevent tab navigation.
*/
position: absolute;
left: -40px;
}
.insurance-container label {
position: relative;
}
.insurance-container .insurance-item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
border: 1px solid #e9e9e9;
padding: 6px;
}
.insurance-container .insurance-item::after {
/*
- do not rely on empty elements for visually
drawing a replacement of a form-control.
- use one of the pseudo elements like `::after`
or `::before` for such purpose.
*/
content: "";
height: 16px;
width: 16px;
background-color: #dddddd;
border: 1px solid #dddddd;
border-radius: 50%;
transition: 500ms all;
-webkit-transition: 500ms all;
-moz-transition: 500ms all;
-ms-transition: 500ms all;
-o-transition: 500ms all;
}
.insurance-container [type="radio"]:checked + .insurance-item::after {
border-color: #0078d6;
border-width: 8px;
}
.insurance-container [type="radio"]:checked + .insurance-item {
border: 1px solid #0078d6;
background-color: #f8f8f8;
}
.insurance-container:focus-within [type="radio"]:not(:checked) + .insurance-item {
/* make use of the `:focus-within` pseudo class */
opacity: 0.5;
}
<fieldset class="insurance-container">
<legend>first radio group</legend>
<label>
<input type="radio" value="insurance-1" name="first-group"/>
<span class="insurance-item">
<span class="wb-type-heading-xs">Input Title</span>
<span class="wb-type-price">Number Value</span>
<span class="wb-type-price">Custom Text</span>
</span>
</label>
<label>
<input type="radio" value="insurance-1" name="first-group"/>
<span class="insurance-item">
<span class="wb-type-heading-xs">Input Title</span>
<span class="wb-type-price">Number Value</span>
<span class="wb-type-price">Custom Text</span>
</span>
</label>
<label>
<input type="radio" value="insurance-1" name="first-group"/>
<span class="insurance-item">
<span class="wb-type-heading-xs">Input Title</span>
<span class="wb-type-price">Number Value</span>
<span class="wb-type-price">Custom Text</span>
</span>
</label>
</fieldset>
<fieldset class="insurance-container">
<legend>second radio group</legend>
<label>
<input type="radio" value="insurance-2" name="second-group"/>
<span class="insurance-item">
<span class="wb-type-heading-xs">Input Title</span>
<span class="wb-type-price">Number Value</span>
<span class="wb-type-price">Custom Text</span>
</span>
</label>
<label>
<input type="radio" value="insurance-2" name="second-group"/>
<span class="insurance-item">
<span class="wb-type-heading-xs">Input Title</span>
<span class="wb-type-price">Number Value</span>
<span class="wb-type-price">Custom Text</span>
</span>
</label>
<label>
<input type="radio" value="insurance-2" name="second-group"/>
<span class="insurance-item">
<span class="wb-type-heading-xs">Input Title</span>
<span class="wb-type-price">Number Value</span>
<span class="wb-type-price">Custom Text</span>
</span>
</label>
</fieldset>
I have inputs and labels in inside info class and I want each label and input to align by 1:3 on a single row no matter what the screen size is, plus I won't mind using flex classes, I just want a solution. Cheers
css
.info {
border: 2px solid steelblue;
border-radius: 10px;
padding: 10px;
}
.info input[type = 'text']{
margin: 10px;
padding: 5px;
border: 2px solid orange;
border-radius: 10px;
}
JSX
<div className = 'form'>
<h3 id = 'intro'>Join Us Here</h3><hr/>
<div className = 'info'>
<div>
<label>Business Name:</label> <input type='text' placeholder='Business Name' />
</div>
<div>
<label>Owner Name:</label> <input type='text' placeholder='Owner Name' />
</div>
<div>
<label>Receptionist Name:</label> <input type='text' placeholder='Receptionist Name' />
</div>
</div>
</div>
Although I agree on comments that you should do at least some research and this is simplest flex layout ever it's simple as adding display:flex on parent div and adding flex: 1 and flex: 3 on components.
I am sending you a working solution on codesandbox
https://codesandbox.io/s/wo6z1j23ll
I have 2 radio buttons of the same ng-model now I want to make textbox disabling and enabling on based on first radio button clicking. How to get the individual status of first radio button to enable my text box
<div style="display: flex; padding: 20px 0px 0px 12px;">
<input type="radio" name="dailyRadio" ng-model="remind.daily" value="Every">
<p id="type-recurrence">Every</p>
<input type="text" id="days" ng-model="remind.dailyDays" ng- disabled="!remind.daily">
</div>
<div style="display: flex; padding: 8px 0px 0px 12px;">
<input type="radio" name="dailyRadio" ng-model="remind.daily" value="EveryweekDays">
<p id="type-recurrence">Every WeekDays</p>
</div>
i have created a plunker:https://plnkr.co/edit/6zrIOUwRh7IczufnMGa6?p=preview
html:
<body ng-controller="radioController">
<div style="display: flex; padding: 20px 0px 0px 12px;">
<input type="radio" name="dailyRadio" ng-model="remind.daily" value="Every" ng-click="getRadioValue()">
<p id="type-recurrence">Every</p>
<input type="text" id="days" ng-model="remind.dailyDays" ng-disabled="!flag">
</div>
<div style="display: flex; padding: 8px 0px 0px 12px;">
<input type="radio" name="dailyRadio" ng-model="remind.daily" value="EveryweekDays" ng-click="getRadioValue()">
<p id="type-recurrence">Every WeekDays</p>
</div>
</body>
js:
var APP = angular.module("APP",[]);
APP.controller("radioController", function($scope){
$scope.remind = {};
$scope.getRadioValue = function(){
if($scope.remind.daily == "Every"){
$scope.flag = true;
}
else {
$scope.flag = false;
}
}
})
hope it works!
First of all the ng-model (confirmed) set for the radio button should have a boolean value, and then you can directly use that model for ng-disabled directive of your text field.
//controller
function Controller($scope){
$scope.confirmed=true;
...
}
//html code
<div ng-app>
<div ng-controller="Controller">
<input type="checkbox" ng-model="confirmed" ng-change="change()"/>
<div>{{confirmed}}</div>
<input type="text" id="days" ng-model="remind.dailyDays" ng-disabled="!confirmed">
</div>
</div>
Live Demo # JsFiddle
I am trying to show and hide a value based on the radio button selection. I am doing this on ng-click of radio button. It is not working for me
Here is the HTML and Angular js code
**HTML Code:**
<div ng-app="ssbApp" ng-controller="ssbCtrl">
<input type="radio" name="showHideExample" ng-model="showHideExample" value="single" ng-click="showHideTest=true">Show
<input type="radio" name="showHideExample" ng-model="showHideExample" value="multi" ng-click="showHideTest=false">hide
<div ng-snow="showHideTest" ng-model="showHideTest">Test hide and show</div>
</div>
**Angular JS Code:**
var ssbApp = angular.module("ssbApp", []);
ssbApp.controller('ssbCtrl', function ($scope, $http) {
$scope.showHideTest = false;
});
The reason your code doesn't work is there is a typo - ng-snow instead of ng-show.
You can also do this by binding the radio buttons to a boolean model (using ng-model), and use this variable to directly control the visibility of the div (using ng-show). Then you don't need any ng-click
HTML:
<div ng-app="ssbApp" ng-controller="ssbCtrl">
<input type="radio" name="showHideExample" ng-model="showHideTest" ng-value="true">Show
<input type="radio" name="showHideExample" ng-model="showHideTest" ng-value="false">hide
<div ng-show="showHideTest">Test hide and show</div>
</div>
JS:
var ssbApp = angular.module("ssbApp", []);
ssbApp.controller('ssbCtrl', function ($scope, $http) {
$scope.showHideTest = false;
});
Fiddle
One Simple Answer without even using js.. https://codepen.io/SusanneLundblad/pen/iBhoJ
<div ng-app="">
<div class="wrap">
<h1>Hello there!</h1>
<p>Push the radio buttons to change the content!</p>
<form>
<label for="first">Show first content</label>
<input id="first" type="radio" name="content" ng-model="content" value="first">
<br />
<label for="other">Show other content</label>
<input id="other" type="radio" name="content" ng-model="content" value="other">
</form>
<div class="wrapper">
<p ng-show="content == 'first'">This is the first content!</p>
<h2 ng-show="content == 'other'">This is the other content!</h2>
</div>
</div>
</div>
CSS: (just for clarity i used)
html, body {
background-color: #ecf0f1;
margin: 20px auto;
display: block;
max-width: 600px;
height: 100%;
}
body {
padding: 20px;
position: relative;
}
label,h1,p,h2 {
font-family: "Helvetica Neue", sans-serif;
font-weight: 300;
}
h1 {
margin-bottom: 1.5em;
color: #3498db;
}
h2 {
color: #2980b9;
margin-bottom: 9px;
margin-top: 0;
font-size: 20px;
background-color: white;
text-align: center;
padding: 16px;
z-index: 15;
border-radius: 4px;
transition: all 2s ease-out;
}
.wrap {
width: 320px;
margin: 0 auto;
display: block;
}
label {
display: inline-block;
width: 180px;
line-height: 2
}
form {
margin-bottom: 2em;
}
.wrapper {
border: 1px dashed #95a5a6;
height: 56px;
margin-top: 16px;
border-radius: 4px;
position: relative;
font-size: 12px;
}
.wrapper p {
line-height: 31px;
text-align: center;
}
<div ng-app="ssbApp" ng-controller="ssbCtrl">
<input type="radio" name="showHideExample" ng-model="showHideExample" value="single" ng-click="showHide(true)">Show
<input type="radio" name="showHideExample" ng-model="showHideExample" value="multi" ng-click="showHide(false)">hide
<div ng-snow="showHideTest" ng-model="showHideTest">Test hide and show</div>
</div>
**Angular JS Code:**
var ssbApp = angular.module("ssbApp", []);
ssbApp.controller('ssbCtrl', function ($scope, $http) {
$scope.showHideTest = false;
$scope.showHide = function(param){
$scope.showHideTest = param;
}
});
simple and fast solution, the ng-init="yourmodel='val1'" is to set the initial value
<input type="radio" name="name" ng-click="yourmodel='val1'"
ng-checked="yourmodel=='val1'" ng-model="yourmodel"
ng-init="yourmodel='val1'" > val 1
<input type="radio" name="name" ng-click="yourmodel='val2'"
ng-checked="yourmodel=='val2'" ng-model="yourmodel" > val 2
<div ng-if="yourmodel=='val1'"> Radio 1 clicked </div>
<div ng-if="yourmodel=='val2'"> Radio 2 clicked </div>
HTML Code Code:
Try this example, it will work.
<div ng-app="ssbApp" ng-controller="ssbCtrl">
<input type="radio" name="showHideExample" ng-model="showHideExample" ng-value="true">Show
<input type="radio" name="showHideExample" ng-model="showHideExample" ng-value="">hide
<div ng-snow="(showHideExample ==true)?true:false">Test hide and show</div>
</div>
Angular JS Code:
var ssbApp = angular.module("ssbApp", []);
ssbApp.controller('ssbCtrl', function ($scope, $http) {
// $scope.showHideTest = false;
});
I have set up radio buttons to display inline on a contact form. They display properly in all tested browsers except IE7, they will not display inline. They are set up using ul and li.
CSS for radio buttons
fieldset div ul {
margin: 5px 0 0 0;
list-style:none;
display:block;
float:left;
}
fieldset div ul li {
margin: 0 15px 0 0;
padding: 0;
list-style:none;
display:inline;
float:none;
}
fieldset div ul li label {
display: inline;
float: none;
font-size: 1em;
font-weight: normal;
margin: 0;
padding: 0;
}
fieldset div ul li input {
background: none;
border: none;
display: inline;
margin: 0 5px 0 0;
padding: 0;
width: auto;
float:none;
}
HTML for form
<fieldset>
<!-- Your Name -->
<div>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="required"/>
</div>
<!-- Email -->
<div>
<label for="emailAddress">Email</label>
<input type="text" name="emailAddress" id="emailAddress" class="required email"/>
</div>
<!-- Phone -->
<div>
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone" />
</div>
<!-- Contact Time -->
<div>
<label for="contactTime">Best Time to Contact</label>
<ul>
<li><input type="radio" name="contactTime" value="morning" /><label for="morning">Morning</label></li>
<li><input type="radio" name="contactTime" value="day" /><label for="day">Day</label></li>
<li><input type="radio" name="contactTime" value="evening" /><label for="evening">Evening</label></li>
</ul>
</div>
<!-- Contact Method -->
<div>
<label for="contactMethod" style="margin:15px 0 0 0;">Best Method of Contact</label>
<ul>
<li><input type="radio" name="contactMethod" value="phone" /><label for="phone">Phone</label></li>
<li><input type="radio" name="contactMethod" value="email" /><label for="email">Email</label></li>
</ul>
</div>
<!-- Coments -->
<div class="floatLeft" style="margin:10px 0 0 0;">
<label for="mess">Message</label>
<textarea name="mess" id="mess" rows="15" cols="5"></textarea>
</div>
<!-- Controls -->
<div class="controls">
<input id="submit" name="submit" type="submit" value="Contact Us" class="button"/>
</div>
</fieldset>
<input name="url" type="hidden" value="" class="noDisplay"/>
Try setting them to float left -
fieldset div ul li {
margin: 0 15px 0 0;
padding: 0;
list-style:none;
display:inline;
float:left;
}
Shouldn't affect any other browsers, and should sort out IE7. Don't forget to clear: left; after them though.