I design on form for user registration in ionic app, run in debug mode on phone and fill form and when I'm submitting form application not responding anything else and when I'm checking it on console error is showing like
"Ignored attempt to cancel a touchend event with cancelable=false, for
example because scrolling is in progress and cannot be interrupted."
<ion-view view-title="Sign Up" class="login-main">
<ion-header-bar>
<h1 class="title">Sign Up</h1>
</ion-header-bar>
<ion-content>
<div class="row">
<div class="login-both-fields">
<div class="list">
<form class="padding" id="signup-form" ng-submit="signup(signupForm.$valid)" name="signupForm" novalidate>
<label class="item item-input">
<span class="input-label login-input-icon"><i class="ion-person"></i></span>
<input type="text" placeholder="Name*" name="m_name" ng-model="mSignupData.m_name" required>
<span ng-show="submitted && signupForm.m_name.$error.required" class="popup-validation-signup">
Please enter name
</span>
</label>
<label class="item item-input">
<span class="input-label login-input-icon"><i class="ion-person"></i></span>
<input type="text" placeholder="Surename*" name="m_surename" ng-model="mSignupData.m_surename" required>
<span ng-show="submitted && signupForm.m_surename.$error.required" class="popup-validation-signup">
Please enter surename
</span>
</label>
<label class="item item-input">
<span class="input-label login-input-icon"><i class="ion-ios-location"></i></span>
<input type="text" placeholder="Address*" name="m_address" ng-model="mSignupData.m_address" required>
<span ng-show="submitted && signupForm.m_address.$error.required" class="popup-validation-signup">Please enter address</span>
</label>
<label class="item item-input">
<span class="input-label login-input-icon"><i class="ion-calendar"></i></span>
<input type="date" placeholder="Date Of Birth*" name="m_dob" ng-model="mSignupData.m_dob" required>
<span ng-show="submitted && signupForm.m_dob.$error.required" class="popup-validation-signup">Please enter DOB</span>
</label>
<label class="item item-input">
<span class="input-label login-input-icon"><i class="ion-iphone"></i></span>
<input type="number" placeholder="Mobile Number" name="m_mobno" ng-model="mSignupData.m_mobno" required>
<span ng-show="submitted && signupForm.m_mobno.$error.required" class="popup-validation-signup">Please enter mobile no</span>
</label>
<label class="item item-input">
<span class="input-label login-input-icon"><i class="ion-ios-email"></i></span>
<input type="email" placeholder="Email*" name="m_email" ng-model="mSignupData.m_email" required>
<span ng-show="submitted && signupForm.m_email.$error.required" class="popup-validation-signup">Please enter emailid</span>
<span ng-show="submitted && signupForm.m_email.$error.email" class="popup-validation-signup">Please enter valid emailid</span>
</label>
<label class="item item-input">
<span class="input-label login-input-icon"><i class="ion-person"></i></span>
<input type="text" placeholder="User Name*" name="m_username" ng-model="mSignupData.m_username" required>
<span ng-show="submitted && signupForm.m_username.$error.required" class="popup-validation-signup">Please enter username</span>
</label>
<label class="item item-input">
<span class="input-label login-input-icon"><i class="ion-locked"></i></span>
<input type="password" placeholder="Password*" name="m_pwd" ng-model="mSignupData.m_pwd" ng-minlength="8" required>
<span ng-show="submitted && signupForm.m_pwd.$error.required" class="popup-validation-signup">Please enter password</span>
<span ng-show="submitted && loginForm.m_pwd.$error.minlength" class="validation-login popup-forvalidation correct-password-login-error">Password should be min 8 character.</span>
</label>
<div class="term-line-signup">
<input id="terms" type="checkbox" name="vehicle" value="Bike" ng-model="mSignupData.vehicle" required> <label for="terms" class="lable-readinfo">By Accept</label> terms& conditions.
<span ng-show="submitted && signupForm.vehicle.$error.required" class="popup-validation-signup please-confirm-condtion">Please accept terms&condition</span>
</div>
<button type="submit" ng-click="submitted = true" class="button button-block button-positive button-energized client-btn">Register</button>
<a class="button button-block button-positive Normal-btn" href="#/mLogin">Signin</a>
</form>
</div>
</div>
</div>
</ion-content>
</ion-view>
You can try return true from touchend and everything will work fine.
Do like this :
var scroll=false;
//while moving
$("body").on("touchmove", function(){
scroll = true;
});
//at the end of touch
$("body").on("touchend", function(){
if (scroll)
return;
// wasn't a drag, just a tap
// more code here
});
//when touch starts
$("body").on("touchstart", function(){
scroll = false;
});
Related
I am relatively new to AngularJs. I am creating a website and there are several forms on the website. The same code with ng-submit is working on other pages. But not here.
The controller, ng-options and validations are working properly.
I tried changing function and checking the function
<div class="row" ng-controller="PostspaceFormController as LoginFormCtrl">
<div class="divider-30 d-none d-lg-block"></div>
<form class="form-styling" name="LoginForm" ng-submit="submitDataInForm3()" novalidate>
<fieldset ng-disabled="sendingMail">
<p class="fs-l-17 fw-l-500 margin-styling">Post Your Space Requirement</p>
<div class="form-group m-0" ng-class="{'has-error': LoginForm.email.$invalid && LoginForm.email.$touched}">
<label class="form-label label-styling">Your Email</label>
<input type="email" placeholder="" class="form-control input-styling" ng-model="data.email" name="email" required pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$">
<div class="error-state ">
<span class="error-label text-danger margin-styling" ng-show="LoginForm.email.$error.required && LoginForm.email.$touched">Email is Required</span>
<span class="error-label text-danger margin-styling" ng-show="LoginForm.email.$touched && LoginForm.email.$invalid && !LoginForm.email.$error.required">Invalid Email Address</span>
</div>
</div>
<div class="form-group m-0" ng-class="{'has-error': LoginForm.mobile.$invalid && LoginForm.mobile.$touched}">
<label class="form-label label-styling">Your Mobile</label>
<input type="text" placeholder="" class="form-control input-styling" ng-model="data.mobile" name="mobile" required pattern="^\d{4,12}$">
<div class="error-state ">
<span class="error-label text-danger margin-styling" ng-show="LoginForm.mobile.$error.required && LoginForm.mobile.$touched">Mobile Number is Required</span>
<span class="error-label text-danger margin-styling" ng-show="LoginForm.mobile.$touched && LoginForm.mobile.$invalid && !LoginForm.mobile.$error.required">Invalid Mobile Number</span>
</div>
</div>
<div class="form-group m-0" ng-class="{'has-error': LoginForm.name.$invalid && LoginForm.name.$touched}">
<label class="form-label label-styling">Your Name</label>
<input type="text" class="form-control input-styling" ng-model="data.name" name="name" placeholder="" required>
<div class="error-state ">
<span class="error-label text-danger margin-styling" ng-show="LoginForm.name.$error.required && LoginForm.name.$touched">Name is Required</span>
<!-- <span class="error-label text-danger margin-styling" ng-show="LoginForm.name.$touched && LoginForm.name.$invalid && !LoginForm.name.$error.required">Invalid Name</span> -->
</div>
</div>
<div class="form-group m-0">
<label class="form-label label-styling">What are you looking for?</label>
<select class="form-control input-styling" required name="spacetype" ng-change="changeSelected(workingSpace)" ng-model="workingSpace" ng-options="type as type.category for type in spaceTypes" ng-class="{'not-selected': !workingSpace}">
<option value="" disabled="">Select Type Of Space</option>
</select>
</div>
<div class="justify-content-center d-flex">
<button type="submit" class="btn-color fs-l-14 h5 btn-block btn-lg text-center rounded-0 margin-styling border-0" ng-disabled="sendingMail" ng-class="{'running': sendingMail}">
<span ng-hide="sendingMail">BOOK YOUR SPACE NOW</span>
<span ng-show="sendingMail">Submitting</span>
<div ng-show="sendingMail" class="ld ld-ring ld-spin"></div>
</button>
</div>
</fieldset>
</form>
</div>
I'm working on an AngularJs application with symfony 2.8 backoffice. I want to edit the contact page title. This is the code of the contact page :
<div ng-controller="contactFormCtrl">
<fieldset>
<h1 translate="front.CONTACT">Contact</h1>
<h2 ng-bind-html="post.content"></h2>
<form name="contactForm" id="contactForm" class="form" data-ng-submit="submitForm(contactForm)">
<div class="form-group" ng-class="{'has-error':contactForm.firstName.$dirty && contactForm.firstName.$invalid, 'has-success':contactForm.firstName.$valid}">
<label for="contactFirstName" class="control-label">
<span translate="content.list.fields.FIRSTNAME">First Name</span>
<span class="symbol required"></span>
</label>
<span class="input-icon">
<input name="firstName" id="contactFirstName" ng-model="contact.firstName" type="text" class="form-control" name="firstName" placeholder="[[ 'content.list.fields.FIRSTNAME' | translate ]]" ng-required="true">
<i class="fa fa-user"></i>
</span>
<span class="error text-small block" ng-if="contactForm.firstName.$dirty && contactForm.firstName.$error.required" translate="content.form.messages.FIRSTNAMEREQUIRED">FirstName is required.</span>
</div>
<div class="form-group" ng-class="{'has-error':contactForm.lastName.$dirty && contactForm.lastName.$invalid, 'has-success':contactForm.lastName.$valid}">
<label for="contactLastName" class="control-label">
<span translate="content.list.fields.LASTNAME">Last Name</span>
<span class="symbol required"></span>
</label>
<span class="input-icon">
<input name="lastName" id="contactLastName" ng-model="contact.lastName" type="text" class="form-control" name="lastName" placeholder="[[ 'content.list.fields.LASTNAME' | translate ]]" ng-required="true">
<i class="fa fa-user-o"></i>
</span>
<span class="error text-small block" ng-if="contactForm.lastName.$dirty && contactForm.lastName.$error.required" translate="content.form.messages.LASTNAMEREQUIRED">LastName is required.</span>
</div>
<div class="form-group" ng-class="{'has-error':contactForm.contactEmail.$dirty && contactForm.contactEmail.$invalid, 'has-success':contactForm.contactEmail.$valid}">
<label for="contactEmail" class="control-label">
<span translate="content.list.fields.EMAIL">Email</span>
<span class="symbol required"></span>
</label>
<span class="input-icon">
<input name="contactEmail" id="contactEmail" ng-model="contact.email" type="email" class="form-control" name="email" placeholder="[[ 'content.list.fields.EMAIL' | translate ]]" ng-required="true">
<i class="fa fa-envelope-o"></i>
</span>
<span class="error text-small block" ng-if="contactForm.contactEmail.$dirty && contactForm.contactEmail.$error.required" translate="content.form.messages.EMAILREQUIRED">Email is required.</span>
</div>
<div class="form-group" ng-class="{'has-error':contactForm.contactSubject.$dirty && contactForm.contactSubject.$invalid, 'has-success':contactForm.contactSubject.$valid}">
<label for="contactSubject" class="control-label">
<span translate="content.list.fields.SUBJECT">Subject</span>
<span class="symbol required"></span>
</label>
<span class="input-icon">
<input name="contactSubject" id= "contactSubject" ng-model="contact.subject" type="text" class="form-control" name="contactSubject" placeholder="[[ 'content.list.fields.SUBJECT' | translate ]]" ng-required="true">
<i class="ti-marker-alt"></i>
</span>
<span class="error text-small block" ng-if="contactForm.contactSubject.$dirty && contactForm.contactSubject.$error.required" translate="content.form.messages.SUBJECTREQUIRED">Subject is required.</span>
</div>
<div class="form-group" ng-class="{'has-error':contactForm.contactMessage.$dirty && contactForm.contactMessage.$invalid, 'has-success':contactForm.contactMessage.$valid}">
<label for="contactMessage" class="control-label">
<span translate="content.list.fields.MESSAGE">Message</span>
<span class="symbol required"></span>
</label>
<span class="input-icon">
<textarea name="contactMessage" id="contactMessage" ng-model="contact.message" rows="10" class="form-control" name="contactMessage" placeholder="[[ 'content.list.fields.MESSAGE' | translate ]]" ng-required="true"></textarea>
<i class="fa fa-message-o"></i>
</span>
<span class="error text-small block" ng-if="contactForm.contactMessage.$dirty && contactForm.contactMessage.$error.required" translate="content.form.messages.CONTACTMESSAGEREQUIRED">Message is required.</span>
</div>
<button type="button" ng-click="submitForm(contactForm)" class="btn btn-primary pull-right" ng-disabled="disableSubmit"> <!-- ng-disabled="userForm.$invalid" -->
<i class="fa fa-spinner fa-spin" ng-if="disableSubmit"></i><i class="fa fa-envelope" ng-if="!disableSubmit"></i> <span translate="content.common.SEND">Send</span>
</button>
</form>
when i use the inspector i find this function :
<title ng-bind="pageTitle()" class="ng-binding">E-electricity</title>
A function called pageTitle() to automatically generate a title for each page. i want to edit E-electricity to E-electricity-contact.
I've reading how to handle whether a forms is valid or invalid, and I can't figure it out why I cannot make my code work properly.
My Html form
<form name="signupForm" ng-submit="submitRegistration(signup)" ng-init="signup = {}" novalidate>
<input type="email" placeholder="Email" name="email" ng-model="signup.email"required></input>
<input type="password" placeholder="Password" name="password" ng-model="signup.password"required></input>
<button type="submit" class="button button-block button-balanced">
Registrarme!
</button>
</form>
My controller
$scope.submitRegistration = function(signupForm){
debugger;
$scope.msg = {};
if ($scope.signupForm.$valid){
//something}else{
console.log('INVALID')
}
I tried $scope.signupForm.$valid and signupForm.$valid... both I got undefined.
How can I do this in the controller side?
EDIT this is my full code (is registration form, I am using Ionic framework)
<ion-view view-title="Registrate!">
<ion-content class="padding">
<h1 class="general-title">BuenjugadorApp</h1>
<button class="button button-block facebook-button icon-left ion-social-facebook" ng-click="facebookSignup()">Registrate con Facebook</button>
<button class="button button-block button-balanced" ng-click="nosotros = true">Registrate con Nosotros</button>
<div class="error-notice" ng-if="msg.error">
<span>¡Ocurrió un error! Vuelve a intentarlo.</span>
</div>
<div class="error-notice" ng-if="msg.required">
<span>¡Todos los campos deben ser completados!</span>
</div>
<div class="error-notice" ng-if="msg.different_passwords">
<span>¡Las contraseñas ingresadas no coinciden!</span>
</div>
<div class="error-notice" ng-if="msg.too_big_password">
<span>¡Las contraseña es demasiado larga, no puede superar los 12 caracteres!.</span>
</div>
<br>
<div >
<form name="signupFormulario" ng-submit="submitRegistration(signupForm)" ng-init="signupForm = {}" novalidate>
<div class="list">
<label class="item item-input item-floating-label">
<span class="input-label">Email</span>
<input type="email" placeholder="Email" name="email" ng-model="signupForm.email"required>
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Nombre</span>
<input type="text" placeholder="Nombre" name="nombre" ng-model="signupForm.nombre"required>
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Apellido</span>
<input type="text" placeholder="Apellido" name="apellido" ng-model="signupForm.apellido"required>
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Contraseña</span>
<input type="password" placeholder="Contraseña" name="password" ng-model="signupForm.password"required>
</label>
<span class="advise">La contraseña debe ser mayor o igual a 6 caracteres.</span>
<label class="item item-input item-floating-label">
<span class="input-label">Repetir Contraseña</span>
<input type="password" placeholder="Repetir Contraseña" name="password" ng-model="signupForm.password_confirmation"required>
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Edad</span>
<input type="number" placeholder="Edad" name="edad" ng-model="signupForm.edad" min="10" max="99" required>
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Teléfono</span>
<input type="number" placeholder="Teléfono" name="telefono" max="999999999999999" ng-model="signupForm.telefono" required>
</label>
<span class="advise">Debes ingresar tu número para que los jugadores puedan contactarse mejor con vos.</span>
<label class="item item-input">
</label>
<label class="item item-input item-select">
<div class="input-label">
Tu Equipo
</div>
<select ng-model="signupForm.equipo2" ng-init="signupForm.equipo2 = {}" required>
<option ng-value="equipo" ng-repeat="equipo in equipos">{{equipo.nombre}}</option>
</select>
</label>
<label class="item item-input item-select">
<div class="input-label">
¿De qué jugás?
</div>
<select name="posicion" ng-model="signupForm.posicion" required>
<option ng-value="posicion.nombre" ng-repeat="posicion in posiciones">{{posicion.nombre}}</option>
</select>
</label>
<label class="item item-input item-select">
<div class="input-label">
¿De dónde sos?
</div>
<select name="lugar" ng-model="signupForm.provincia" ng-change="cambiovalor(signupForm.provincia)" required>
<option ng-value="prov" data-ng-repeat="(prov, ciudadesss) in complejos">{{prov}}</option>
</select>
</label>
<label class="item item-input item-select">
<div class="input-label">
¿Ciudad?
</div>
<select ng-disabled="!signupForm.provincia" ng-model="signupForm.ciudad" name="city" required>
<option ng-value="ciudad" data-ng-repeat="ciudad in ciudades">{{ciudad}}</option>
</select>
</label>
<button type="submit" class="button button-block button-balanced">
Registrarme!
</button>
<div class="centered">
<a ng-href="#/login">Ya tengo una cuenta.</a>
</div>
</div>
</form>
</div>
</ion-content>
</ion-view>
I have troubles understanding how it works... basically when I submit my form, it is validated without checking the required inputs nor anything else.
I've set the 'novalidate' attribute to disable the HTML5 validation, then I've set all my fields as 'required' (same for my mail input with an email validation), and I'm using 'ngMessages' from Angular to check the inputs (is that even necessary??). But I can still submit the form without any field filled in... What am I doing wrong? Could it come from the fact that I use ng-submit and not ng-click?
Any help is appreciated !
https://jsfiddle.net/WebMoutarde/n1mocvco/
<div ng-controller="MyCtrl">
<form name="form" novalidate ng-submit="vm.signup()">
<div class="list">
<label class="item item-input item-stacked-label noborder">
<span class="input-label">Nom</span>
<input type="text" name="nom" ng-model="vm.nom" required>
</label>
<hr style="border-style: solid;margin-left: 16px;margin-right: 16px;border-color: #e8e8e8;"/>
<label class="item item-input item-stacked-label noborder">
<span class="input-label">Prénom</span>
<input type="text" name="prenom" ng-model="vm.prenom" required>
</label>
<hr style="border-style: solid;margin-left: 16px;margin-right: 16px;border-color: #e8e8e8;"/>
<label class="item item-input item-stacked-label noborder">
<span class="input-label">Mail</span>
<input type="email" name="mail" ng-model="vm.mail" required>
</label>
<hr style="border-style: solid;margin-left: 16px;margin-right: 16px;border-color: #e8e8e8;"/>
<label class="item item-input item-stacked-label noborder">
<span class="input-label">Mot de passe</span>
<input type="password" name="password" ng-model="vm.password" required>
</label>
<hr style="border-style: solid;margin-left: 16px;margin-right: 16px;border-color: #e8e8e8;"/>
<label class="item item-input item-stacked-label noborder">
<span class="input-label">Confirmez votre mot de passe</span>
<input type="password" name="passwordCheck" ng-model="vm.passwordCheck" required>
</label>
<hr style="border-style: solid;margin-left: 16px;margin-right: 16px;border-color: #e8e8e8;"/>
</div>
<div ng-messages="form.$error" role="alert">
<p style="text-align: center;" ng-message="required">You must fill in all fields</p>
<p style="text-align: center;" ng-message="email">Your email address is invalid</p>
</div>
<div class="item noborder">
<button class="button button-block button-positive" type="submit" >Créer un compte</button>
</div>
</form>
</div>
I've seen many SO questions about this but I still missing something...
You could disabled form submit button till form gets into valid state by using ng-disabled directive on form button
<button class="button button-block button-positive"
type="submit"
ng-disabled="form.$invalid">
Créer un compte
</button>
Or even better would be verify form has been valid or ng-submit method and then call your signup method of controller like below.
ng-submit="form.$valid && vm.signup()"
In my page below everything is working except for the user.productNumber input at the bottom. What I mean is that all the "required" fields are keeping the "Create Account" button disabled but it's like the productNumber input is being ignored. How can I get this working?
<ion-view title="Sign Up">
<ion-content>
<form name="signUpForm">
<div class="list">
<label class="item item-input item-stacked-label">
<input data-ng-model="user.email" data-ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" type="email" placeholder="user#mail.net" required>
</label>
<label class="item item-input item-stacked-label">
<input data-ng-model="user.password" type="password" placeholder="password" required>
</label>
<label class="item item-input item-stacked-label">
<input data-ng-model="user.passwordAgain" type="password" placeholder="password (again)" required>
</label>
<li class="item item-checkbox">
<label class="checkbox">
<input data-ng-model="user.newsletter" type="checkbox" checked>
</label>
Weekly Newsletter
</li>
<label class="item item-input item-stacked-label">
<input data-ng-modal="user.productNumber" data-ng-pattern="/^[a-zA-Z0-9-]{8}$/" type="text" placeholder="Product Number" required>
</label>
<button data-ng-click="createAccountClick()" data-ng-disabled="signUpForm.$invalid" class="button button-full button-positive">
Create Account
</button>
</div>
</form>
</ion-content>
</ion-view>
This is because you mispelled data-ng-model with data-ng-modal.
Simply change:
data-ng-modal="user.productNumber"
with
data-ng-model="user.productNumber"