I have written a google web app using materializecss. All works well on a laptop. I have designed it to be responsive, testing by reducing the width of the browser on my laptop and again, it workds well.
But, when I try it on an actual android phone using chrome, it is correctly reducing the number of columns, but I can barely read the text as it is soo small. It looks like the screen is laptop width, with each of the input fields taking the full width. When I click on any field, it goes maximum zoom to somewhere on the page and I have to scroll around to find the field I have clicked on, then zoom out a little. Sorry I can't explain any more, its wierd.
I have created a simple test by copying the 'Getting Started' code and 'Text Input' code from the materialize website and exactly the same thing happens.
There's not a lot in the form-JS, I have just been trying some Materialize form inits.
It looks fine when you run it in the code snippet on in a browser on a laptop, but when you try it on a phone it goes all wrong.
document.addEventListener('DOMContentLoaded', function() {
// M.updateTextFields();
M.AutoInit();
});
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12 l6">
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
<div class="input-field col s12 l6">
<input id="last_name" type="text" class="validate">
<label for="last_name">Last Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input disabled value="I am not editable" id="disabled" type="text" class="validate">
<label for="disabled">Disabled</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="col s12">
This is an inline input field:
<div class="input-field inline">
<input id="email_inline" type="email" class="validate">
<label for="email_inline">Email</label>
<span class="helper-text" data-error="wrong" data-success="right">Helper text</span>
</div>
</div>
</div>
</form>
</div>
</div> <!-- Close Container -->
<!--JavaScript at end of body for optimized loading-->
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
I'm not seeing the problem you describe when testing with the code you posted:
https://codepen.io/panchroma/pen/ExoegNJ
Maybe there's an issue related to this line
<?!= include("form-JS"); ?>
Are you able to post this form-js file as well?
Related
I am trying to input a certain text into the field 'payment__card-name', I have tried few webdriver code's but couldn't get through this issue,
This is the latest code i wrote, not sure what is going wrong in here, please help
//driver.findElement(By.xpath("//*div[#id='checkout-form-fieldset-payment']/fieldset/div[1]/div[2]/div/fieldset/div/div[1]/div[2]/input[#id='payment__card-name']")).sendKeys("add1");
Actual HTML code -
<body>
<div id="app-root">
<div class="">
<div class="c-navigation" role="banner">
<section class="app-checkout">
<section class="tickets-summary">
<div class="page-content page-content--mobile-full-width">
<div class="checkout-form">
<div class="app-checkout-form-feedback"/>
<form method="post" accept-charset="utf-8" id="checkout-form-passengers">
<form method="post" accept-charset="utf-8" id="checkout-form-contact-details">
<form method="post" accept-charset="utf-8" id="checkout-form-payment">
<div class="checkout-form-panel checkout-form-panel--no-padding app-payment" id="checkout-form-fieldset-payment">
<fieldset>
<legend class="checkout-form-panel--padding-fix checkout-form-panel__header h3">Payment</legend>
<div class="checkout-form-panel--padding-fix">
<div class="checkout-form-panel__col-from-medium-12 payment-switch__toggle">
<div>
<div class="payment-details payment__clearfix" id="checkout-form-fieldset-payment-details">
<fieldset>
<div class="">
<div class="payment__clearfix checkout-form-panel__col-from-small-6">
<div class="input__wrap">
<div class="input__wrap input__wrap--error">
<label for="payment__card-name">Name on card</label>
<input type="text" id="payment__card-name" name="payment__card-name" data-type="name" maxlength="50" value=""/>
<div class="input__feedback">Please enter the card holder's name exactly as it appears on the card</div>
</div>
</div>
Here is the xpath that you can use.
//div[#id='checkout-form-fieldset-payment']/fieldset//input[#id='payment__card-name']
Screenshot:
I'm following along the example of how to use the DatePicker widget but it doesn't seem to load correctly on my app. I'm currently doing:
<div class="form-group row">
<label for="start_date" class="col-sm-3 col-form-label">Start Date</label>
<div class="col-sm-9">
<input kendo-date-picker />
</div>
</div>
Unfortunately, this doesn't correctly create the widget and only creates a text input box. Does anyone know why this problem could be happening? I would appreciate any insight!
You must be missing some markup and/or the app initialization.
Here's a working DatePicker with the markup in your question wrapped in an ng-app div and with the app being initialized in script:
https://dojo.telerik.com/#Stephen/elURO
HTML:
<div ng-app="app" ng-controller="MyCtrl">
<!-- This is your markup -->
<div class="form-group row">
<label for="start_date" class="col-sm-3 col-form-label">Start Date</label>
<div class="col-sm-9">
<input kendo-date-picker />
</div>
</div>
<!-- End of your markup -->
</div>
script:
angular.module("app", ["kendo.directives"]).controller("MyCtrl", function($scope) {
});
Am trying to do angular form validation am not getting error message when i click on submit, i have added two text two receive to take first name and last name what went wrong i couldn't find please let me know
<!-- Bootstrap Core CSS -->
<link href="resources/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="resources/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="resources/sb-admin/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="resources/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Date picker css -->
<link rel="stylesheet" href="resources/datepicker/datepicker.min.css"></link>
<!-- My css -->
<link rel="stylesheet" href="resources/mine/css/MyCss.css"></link>
<script src="resources/js/angular/angular.js"></script>
<script src="resources/js/app/app.js"></script>
</head>
<body ng-app="myapp" ng-controller="mainController">
<div id="wrapper">
<!-- Navigation -->
<%# include file="Menu.jsp" %>
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><b>Student Enrollment</b></h3>
</div>
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Basic Information for admin
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="form-body"> <!-- flot-chart previus class name -->
<form id="userForm" method="post" class="form-horizontal" action="login" ng-submit="submitForm()" novalidate>
<!-- NAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.terms.$invalid && (userForm.terms.$dirty || submitted)}">
<label class="col-xs-2 control-label">Student Full Name</label>
<div class="col-xs-3">
<input type="text" name="firstname" class="form-control" ng-model="user.name" placeholder="Your Name" ng-required="true">
<p ng-show="userForm.name.$error.required && (userForm.name.$dirty || submitted)" class="help-block">Your First Name is required.</p>
</div>
<div class="col-xs-3">
<input type="text" name="name" class="form-control" ng-model="user.name" placeholder="Your Name" ng-required="true">
<p ng-show="userForm.name.$error.required && (userForm.name.$dirty || submitted)" class="help-block">Your Last Name is required.</p>
</div>
</div>
<div class="form-group">
<div class="col-xs-1 ">
<button type="submit" class="btn btn-primary ">Submit</button>
</div>
<div class="col-xs-1 ">
<button type="reset" class="btn btn-default" id="rstbutton">Refresh</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script type="text/javascript" src="resources/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="resources/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="resources/metisMenu/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="resources/sb-admin/sb-admin-2.js"></script>
</body>
</html>
set name for form like to this name="userForm"
<form name="userForm">
<input type="text" name="name" ng-model="" >
<p ng-show="userForm.name.$error.required && (userForm.name.$dirty || submitted)" class="help-block">Your Last Name is required.</p>
<input type="text" name="firsname" ng-model="" >
<p ng-show="userForm.firstname.$error.required && (userForm.firstname.$dirty || submitted)" class="help-block">Your First Name is required.</p>
</form>
Some code changes need to be made :
ng-model for both the text boxes should be different. In your code it is looking like same for both inputs.
name attribute value should be different if you want to perform different validations on both the fields.
Working demo :
var app = angular.module('myApp',[]);
app.controller('myController',function( $scope ) {
$scope.validate = function() {
alert('submitting..');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app= "myApp" ng-controller="myController">
<form name="userForm" ng-submit="userForm.$valid && validate()" novalidate>
<div class="form-group">
<label class="col-xs-2 control-label">Student Full Name</label>
<div class="col-xs-3">
<input type="text" name="firstname" class="form-control" ng-model="user.firstname" placeholder="Your Name" ng-required="true">
<p ng-show="submitted == true && userForm.firstname.$error.required" class="help-block">Your First Name is required.</p>
</div>
<div class="col-xs-3">
<input type="text" name="lastname" class="form-control" ng-model="user.lastname" placeholder="Your Name" ng-required="true">
<p ng-show="submitted == true && userForm.lastname.$error.required" class="help-block">Your Last Name is required.</p>
</div>
</div>
<input type="submit" value="Submit" ng-click="submitted = true"/>
</form>
</div>
I have dropdown in model popup and want to do required field validation here. My code is following.. But the code is not done the validation..
<div class="form-group form-group-sm">
<label for="itClassification" class="control-label text-xs
col-xs-12 col-sm-4 col-md-4 col-lg-4">IT Classification :
</label>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<select class="form-control" id="itClassification"
name="itClassification" ng-model="itClassification"
ng-options="ic.itId as ic.itClassificationName for ic in
itClassifications" placeholder="select IT Classification"
required>
<option value="" ng-selected="selected">Select IT
Classification</option>
</select>
<div class="help-block" ng-messages="addClientModal.itClassification.$error"
ng-if="addClientModal.itClassification.$dirty && addClientModal.itClassification.$invalid">
<p class="text-danger small" ng-message="required"><strong>ITClassification is required.</strong>
</p>
</div>
</div>
</div>
Can anyone help me to solve this..?
Thanks in advance
Just add ngform tag
<div class="form-group form-group-sm">
<ng-form name="addClientModal">
// other tags
</ng-form>
</div>
Here i added form name as addClientModal see Example
Check this is the answer. You need to use validations on form name->form control name. Here is Plunkr http://plnkr.co/edit/bKEVv4kfnSJFd0w29Zdl?p=preview
var app = angular.module('myApp', ['ngMessages']);
app.controller('TestController', function($scope) {
//$scope.itClassification = null;
$scope.optionsList = [
{'label':'One','value':'1'},
{'label':'Two','value':'2'},
{'label':'Three','value':'3'},
{'label':'Four','value':'4'},
{'label':'Five','value':'5'},
{'label':'Six','value':'6'},
{'label':'Seven','value':'7'},
{'label':'Eight','value':'8'},
{'label':'Nine','value':'9'},
{'label':'Ten','value':'10'},
]
$scope.listItemChanged=function(schedule){
alert($scope.itClassification)
};
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs#1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
<script data-require="ng-messages#*" data-semver="1.3.16" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-messages.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="TestController">
<form name="userForm" autocomplete="off">
<div class="form-group form-group-sm">
<label for="itClassification" class="control-label text-xs col-xs-12 col-sm-4 col-md-4 col-lg-4">IT Classification :</label>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<select class="form-control" id="itClassification" name="itClassification" ng-model="itClassification" ng-options="listItem.label as listItem.value for listItem in optionsList" placeholder="select IT Classification" required>
<option value="" ng-selected="selected">Select IT Classification</option>
</select>
<div class="help-block" ng-messages="userForm.itClassification.$error">
<p class="text-danger small" ng-message="required"><strong>ITClassification is required.</strong>
</p>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
I have the following code:
<div id="messageArea">
<div ng-messages="text1.$error">
<div ng-message="required">
Text1 is required ...
</div>
</div>
<div ng-messages="text2.$error">
<div ng-message="required">
Text2 is required ...
</div>
</div>
<div ng-messages="text3.$error">
<div ng-message="required">
Text3 is required ...
</div>
</div>
</div>
<div>Text1<input id="text1" ng-model="text1" name="text1" ng-required="true"></div>
<div>Text2<input id="text2" ng-model="text2" name="text2" ng-required="true"></div>
<div>Text3<input id="text3" ng-model="text3" name="text3" ng-required="true"></div>
I wanted to show one error message at a time. When the first error is solved then the next error message will show. Anyone has any idea how I can do this? Thanks.
Nice solution is use CSS and ng-class
var app = angular.module('app', ['ngMessages']);
.error-wrapper {
color: red;
}
.error-wrapper > .view {
display: block;
}
.error-wrapper > .view ~ .view{
display: none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-messages.min.js"></script>
</head>
<body ng-app="app">
<form ng-submit="createWallet()" name='testForm' novalidate>
<div>
<input ng-model='text1' type="text" name='text1' placeholder='text1' required>
</div>
<div>
<input ng-model='text2' type="text" name='text2' placeholder='text2' required>
</div>
<div>
<input ng-model='text3' type="text" name='text3' placeholder='text3' required>
</div>
<div class="error-wrapper">
<div ng-class="{ view: testForm.text1.$invalid }" class="error" ng-messages="testForm.text1.$error">
<div ng-message='required'>Text1 required</div>
</div>
<div ng-class="{ view: testForm.text2.$invalid }" class="error" ng-messages="testForm.text2.$error">
<div ng-message='required'>Text2 required</div>
</div>
<div ng-class="{ view: testForm.text3.$invalid }" class="error" ng-messages="testForm.text3.$error">
<div ng-message='required'>Text3 required</div>
</div>
</div>
<button>Submit</button>
</form>
</body>
</html>
It's show only the first error message with class .view, at the plunker http://plnkr.co/edit/kBSpRJLs6QA2D0jctKXB?p=preview
If you wrap the inputs in a form tag with an ID you can use ng-messages on the form to pick up errors from all the inputs. You can see this here: http://jsbin.com/tikufuvawe/2/edit.
<form name="userDetails">
<input name="userName" type="number" ng-model="number" required ng-maxlength="2" />
<textarea name="text" type="text" ng-model="text" required></textarea>
<div ng-messages="userDetails.$error">
<div ng-message="required">This is required</div>
</div>
</form>
EDIT:
I have updated my example http://jsbin.com/zadojamifo/3/edit using ng-show to hide other errors such that only one will show at a time. Its not a great solution but works for the situation described.
<div ng-messages="userDetails.number.$error">
<div ng-message="required">number is required</div>
</div>
<div ng-messages="userDetails.text.$error" ng-show="!userDetails.number.$error.required">
<div ng-message="required">text is required</div>
</div>
<div ng-messages="userDetails.other.$error" ng-show="!userDetails.number.$error.required && !userDetails.text.$error.required">
<div ng-message="required">other is required</div>
</div>
As you can see the ng-show will get bigger and bigger in size if more validation types are added and if more controls are added that require validation.
Maybe is too late but this is my solution, use ng-messages-multiple to show one or more message, angular respect the order of validation messages:
<form name="loginForm" ng-submit="login()">
<label>Email</label>
<input required name="email" type="email" ng-model="email">
<div ng-messages="loginForm.email.$error" ng-show="loginForm.email.$dirty && loginForm.email.$invalid" ng-messages-multiple>
<div ng-message="required">El email es requerido!</div>
<div ng-message="email">El email debe cumplir con el formato: email#dominio.com!</div>
</div>
<label>Contraseña</label>
<input required name="password" type="password" ng-model="password" ng-pattern="passwordPattern" md-maxlength="12">
<div ng-messages="loginForm.password.$error" ng-show="loginForm.password.$dirty && loginForm.password.$invalid">
<div ng-message="required">La contraseña es requerida!</div>
<div ng-message="pattern">Se requieren de 6 a 12 caracteres, por lo menus un dígito, una letra mayuscula y una minúscula</div>
</div>
<div layout="row" layout-align="center center">
<button ng-disabled="loginForm.$invalid>Login</button>
</div>
</form>
You can do something like this
<div id="messageArea">
<div ng-messages="number.$error">
<div ng-message="required">
Number is required ...
</div>
</div>
<div ng-messages="text.$error" ng-if="!number.$error">
<div ng-message="required">
Text is required ...
</div>
</div>
In this case you show the second block of messages only if the first one does not exists (and it's hidden if number.$errors exists)
This sample (http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html) uses a follow solution:
<div ng-messages="my_form.first_name.$error"
ng-if="interacted(my_form.first_name)">
$scope.submitted = false;
$scope.submit = function() {
$scope.submitted = true;
};
$scope.interacted = function(field) {
return $scope.submitted || field.$dirty;
};
If you don't want to show on page load but either on page submit or on change of value then use
<form name="frmSome">
<div ng-messages="userDetails.$error"
ng-if='frmSome.userName.$dirty || frmSome.$submitted'>
<span ng-message="required">Name is Required</span>
<span ng-message="maxlength">Max. 100</span>
</div>
<input name="userName" type="text"
ng-model="model.name"
ng-required='true'
ng-maxlength="30" />
..............................
..............................
<input type='submit' value='Submit' />
</form>
If you touch the text box it will be "dirty"
if try to submit the page "Submitted"
It works on the name not the model