I have the following in my handlebars tag:
{{#editmode mode}}
<div class="form-group login-input">
<i class="fa fa-key overlay"></i>
<input type="password" class="form-control text-input" name="password" placeholder="Password" value="{{password}}">
</div>
<div class="form-group login-input">
<i class="fa fa-key overlay"></i>
<input type="password" class="form-control text-input" name="password_confirmation" value="{{password}}">
</div>
{{/editmode}}
and I have the following registered as my helper function:
Handlebars.registerHelper('editmode', function(mode){
return mode == 'edit' ? true : false;
});
The object passed to the handlebars template looks something like this:
{
firstname: 'Test',
lastname: 'Test lastname',
mode: 'new
}
So basically, whenever the 'mode' variable is 'new', I want to show the password fields, otherwise hide them, but right now they are always hidden. Any ideas?
I figured it out. This did the trick:
Handlebars.registerHelper('editmode', function(mode, options){
return mode == 'edit' ? '' : options.fn();
});
You can use if statement.
<div class="form-group login-input">
<i class="fa fa-key overlay"></i>
<input type="password" class="form-control text-input" name="password" placeholder="Password" value="{{password}}">
</div>
{{#if mode}}
<div class="form-group login-input">
<i class="fa fa-key overlay"></i>
<input type="password" class="form-control text-input" name="password_confirmation" value="{{password}}">
</div>
{{/if}}
Related
I want a box that is hidden and shows itself while the user types something on the reset password box and that is shown always when the page loads the password input box.
<div class="form-group col-md-6">
<label for="inputTitle4">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password" value="<?=#$_POST['password']?>">
<?php echo form_error('password', '<p class="error">', '</p>'); ?>
<span toggle="#password-field" class="fa fa-fw fa-eye field_icon toggle-password"></span>
</div>
<?php }else{?>
<div class="form-group col-md-6">
<label for="inputTitle4"> Reset Password</label>
<input type="password" class="form-control rpassword" id="password" name="rpassword" placeholder="Reset your passoword" value="">
<?php echo form_error('rpassword', '<p class="error">', '</p>'); ?>
<span toggle="#password-field" class="fa fa-fw fa-eye field_icon toggle-password"></span>
</div>
<?php };?>
<div class="form-group col-md-6 confirm" >
<label for="inputTitle4">Confirm Password</label>
<input type="password" class="form-control " id="cpassword" name="cpassword" placeholder="Confirm Password" value="<?=#$_POST['cpassword']?>">
<?php echo form_error('cpassword', '<p class="error">', '</p>'); ?>
</div>
``` jquery
$(document).on('input', '.rpassword',function() {
$('.confirm').show();
});
You'll need to listen to the 'input' event on that input, then check the value, if the value exists, you can show the box.
$('body').on('input', '.rpassword', function(e){
if( $(this).val() !== "" || $(this).val() !== null) {
$('.confirm').show();
}
});
$("#password").keypress(function(event) {
$(".confirm").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-6">
<label for="inputTitle4"> Reset Password</label>
<input type="password" class="form-control rpassword" id="password" name="rpassword" placeholder="Reset your passoword" value="">
<span toggle="#password-field" class="fa fa-fw fa-eye field_icon toggle-password"></span>
</div>
<div class="form-group col-md-6 confirm" style="display:none">
<label for="inputTitle4">Confirm Password</label>
<input type="password" class="form-control " id="cpassword" name="cpassword" placeholder="Confirm Password" >
</div>
I want to create login form, and then the result is going to another page, using js to catch the value and create the process.
I have success created it using onclick, but I want to change onclick to onsubmit as I don't want to click the button, just press 'Enter' keyboard, the process is working. I have tried change from onclick to onsubmit process, but I still not get the value on the js page.
Here's the login form
<form >
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Phone Number" name="phone_number" id="phone_number">
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" class="form-control" placeholder="Password" name="password" id="password">
</div>
<div class="form-group">
<input type="button" value="Login" class="btn float-justify login_btn" onClick="login()">
</div>
</form>
<script src="<?= base_url() ?>assets/js-process/login/login.js" type="text/javascript"></script>
Here's the js page
function login()
{
var phone_number = $('#phone_number').val();
var password = $('#password').val();
console.log(phone_number)
}
I have changed the onclick to onsubmit, but I can't get the value on the js page again.
here's my change
<form id="myform" onsubmit="login()">
......
<div class="form-group">
<input type="submit" value="Submit" class="btn float-justify login_btn">
</div>
Do you know where's the error on my code ?
Thank you
As I see it , everything is good , where should be looking now on 2 things
first its jquery you are using but i can not see its link
second check your base url , it is properly being generated or not
Below you can see its working on onclick
same way you can do with on submit but you have to pass event in function so that you can stop its default action . you can do that using event.preventDefault();
function login(e)
{
e.preventDefault();
var phone_number = $('#phone_number').val();
var password = $('#password').val();
alert(phone_number)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onSubmit="login(event)">
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Phone Number" name="phone_number" id="phone_number">
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" class="form-control" placeholder="Password" name="password" id="password">
</div>
<div class="form-group">
<input type="submit" value="Login" class="btn float-justify login_btn" >
</div>
</form>
I am currently working on a website and this particular section requires the user to enter their details in a form. What I am trying to achieve is the following;
If the user hits the submit button and any fields are empty, I want a span element, which is initially set to CSS display none, to show up for each respective input field which has not been filled.
However, nothing seems to be happening when I click on the button. When I go to the console, it does not display any error message.
Can someone please assist? Many thanks.
HTML:
<!-- START OF 'YOUR DETAILS' FORM-->
<section>
<div class="container">
<h3>Step 3: Your Details</h3>
<!-- SLIDE-IN DIV TO REPRESENT DAY PASS -->
<div class="row chosenmembership">
<div class="col-md-12 text-center" id="yourdetails">
<form action="" method="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" placeholder="Email Address" id="email" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Email is required!</span>
</div>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" placeholder="Full Name" id="name" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Name is required!</span>
</div>
<div class="form-group">
<label for="number">Contact Number:</label>
<input type="tel" placeholder="Contact Number" id="number" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Contact Number is required!</span>
</div>
<div class="form-group">
<label for="postcode">Post Code:</label>
<input type="text" placeholder="Post Code" id="postcode" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Post Code is required!</span>
</div>
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="tel" placeholder="DD/MM/YYYY" id="dob" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
DOB is required!</span>
</div>
</form>
<div class="form-group">
<input type="submit" id="submit" value="CONTINUE">
</div>
</div>
</div>
</div>
</section>
<!-- END OF YOUR DETAILS FORM -->
JS / JQUERY:
$("#submit").click(function(){
var $formValues = $(".your-details");
var $warning = $(".warnings");
$($formValues).each(function(index){
if ($(this).val("")){
$($warning[index]).css("display","block");
}
})
})
When your running this code $($formValues).each(function(index){if ($(this).val("")){ console.log(this) and see in which context your function is running, the issue is that every time you write a function declaration it creates a new this context and thus the previous this is lost.
Your selectors are kind of redundant, keep the form from submission and show the warnings when any are empty seems to be your intent.
$("#submit").click(function(e) {
$(".your-details").each(function(index) {
if ($(this).val() =="") {
e.preventDefault();// no submit if not filled out
$(this).next('.warning').css("display", "block");// next sibling show
}
});
});
Thought about this for a bit and believe you might handle the form submit instead
$("form").on('submit', function(e) {
$(this).find('.warning').css("display", "none");// hide in case they fix input values
$(this).find(".your-details").each(function(index) {
if ($(this).val() =="") {
$(this).next('.warning').css("display", "block");// next sibling show
}
});
});
Alternately you might use a filter.
$("form").on('submit', function(e) {
$(this).find('.warning').css("display", "none");// hide in case they fix input values
var emptyInputs = $(this).find(".your-details")
.filter(function() {
return ($(this).val() =="");
});
if(!!emptyInputs) {
e.preventDefault();
emptyInputs.next('.warning').css("display", "block");
}
});
Except typo, there was one problem more, you are actually setting value, instead of checking it: if ($(this).val("")) If you change it, and fix typo, something like this should work. Simplified, your code could look like this:
$("#submit").click(function(){
var $formValues = $(".your-details");
$($formValues).each(function(index){
if ($(this).val()==''){
$(".warning").eq(index).css("display","block");
}
else {
$(".warning").eq(index).css("display","none");
}
})
})
Demo:
$("#submit").click(function(){
var $formValues = $(".your-details");
$($formValues).each(function(index){
if ($(this).val()==''){
$(".warning").eq(index).css("display","block");
}
else {
$(".warning").eq(index).css("display","none");
}
})
})
.warning {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- START OF 'YOUR DETAILS' FORM-->
<section>
<div class="container">
<h3>Step 3: Your Details</h3>
<!-- SLIDE-IN DIV TO REPRESENT DAY PASS -->
<div class="row chosenmembership">
<div class="col-md-12 text-center" id="yourdetails">
<form action="" method="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" placeholder="Email Address" id="email" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Email is required!</span>
</div>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" placeholder="Full Name" id="name" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Name is required!</span>
</div>
<div class="form-group">
<label for="number">Contact Number:</label>
<input type="tel" placeholder="Contact Number" id="number" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Contact Number is required!</span>
</div>
<div class="form-group">
<label for="postcode">Post Code:</label>
<input type="text" placeholder="Post Code" id="postcode" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Post Code is required!</span>
</div>
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="tel" placeholder="DD/MM/YYYY" id="dob" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
DOB is required!</span>
</div>
</form>
<div class="form-group">
<input type="submit" id="submit" value="CONTINUE">
</div>
</div>
</div>
</div>
</section>
<!-- END OF YOUR DETAILS FORM -->
P.S. You can keep your: $($warning[index]) vars, but you should hide warnings, anyway (else block), if field is not empty.
I have a problem validating my form. It is a form to change the password of a register user, the profile picture, and the biography of him. In that form the password is not required firstly, but when someone write the old password, the form requires the new password and the confirm password. I show it by an example.
Right now is not required, but if I write something in the input of old password I need that the new password and the confirm password become red. The code I have is it:
<div class="form-group">
<label for="oldpassword" class="cols-sm-2 control-label">Old Password</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<input type="password" class="form-control" name="oldpassword" id="oldpassword"
placeholder="Enter your actual password" ng-model="oldPassword"/>
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="cols-sm-2 control-label">New Password</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<input type="password" class="form-control" name="password" id="password"
placeholder="Enter your new password"
ng-model="newPassword" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" require-pass/>
</div>
</div>
</div>
<div class="form-group">
<label for="confirm" class="cols-sm-2 control-label">Confirm Password</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<input type="password" class="form-control" name="confirm" id="confirm"
placeholder="Confirm your new password" ng-model="confirm" require-pass confirm-directive
/>
</div>
</div>
</div>
The require-pass directive works but only when the user write something in the input of new password or confirm password. The confirm-directive is a directive to check if both password are equals (that directive works).
The require-pass directive is:
app.directive('requirePass', function () {
return {
require: 'ngModel',
link: function (scope, element, attr, mCtrl) {
function myValidation(value) {
var oldPass = $('#oldpassword').val();
console.log(oldPass);
if (oldPass!="") {
mCtrl.$setValidity('charE', false);
} else {
mCtrl.$setValidity('charE', true);
}
return value;
}
mCtrl.$parsers.push(myValidation);
}
}});
Thank you for the help!!
You don't need another custom directive for this. You can just use ng-required. Docs here: https://docs.angularjs.org/api/ng/directive/ngRequired
<input id="newPass" ng-required="oldPass" type="text" ng-model=... />
<input id="newPassConfirm" ng-required="oldPass" type="text" ng-model=... />
ng-required="oldPass" basically says "I require this field to be filled out if oldPass is not blank."
I'm trying to write a registration form with the help of AngularJS and using Bootstrap for the styling. I've got something working, but I'm pretty sure if I had more knowledge with Angular this could be greatly improved. So far I've got...
User-name field:
<div class="container" ng-controller="validateCtrl">
<form name="myForm">
<div class="form-group has-feedback" ng-class="{true: 'has-success'}[myForm.email.$dirty]" ng-class="{true: 'has-error'}[myForm.email.$invalid]">
<label for="email">Email</label>
<input class="form-control" type="email" name="email" ng-model="email" ng-maxlength="254" placeholder="Enter Email" required>
<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="myForm.email.$dirty && myForm.email.$invalid"></span>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required!</span>
<span ng-show="myForm.email.$error.email">Invalid email address!</span>
<span ng-show="myForm.email.$error.maxlength">Email is too long!</span>
</span>
<span class="glyphicon glyphicon-ok form-control-feedback" ng-show="myForm.email.$dirty && !myForm.email.$invalid"></span>
</div>
Password Field:
<div class="form-group has-feedback" ng-class="{true: 'has-success'}[myForm.password.$dirty]" ng-class="{true: 'has-error'}[myForm.password.$invalid]">
<label for="password">Password</label>
<input class="form-control" type="password" name="password" ng-model="password" ng-minlength="5" ng-maxlength="255" placeholder="Enter Password" required>
<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="myForm.password.$dirty && myForm.password.$invalid"></span>
<span style="color:red" ng-show="myForm.password.$dirty && myForm.password.$invalid">
<span ng-show="myForm.password.$error.required">Password is Required!</span>
<span ng-show="myForm.password.$error.minlength">Password is too short! </span>
<span ng-show="myForm.password.$error.maxlength">Password is too long!</span>
</span>
<span class="glyphicon glyphicon-ok form-control-feedback" ng-show="myForm.password.$dirty && !myForm.password.$invalid"></span>
</div>
Password Confirm:
<div class="form-group has-feedback" ng-class="{true: 'has-success'}[myForm.passwordrepeat.$dirty]" ng-class="{true: 'has-error'}[myForm.passwordrepeat.$invalid]">
<label for="passwordrepeat">Confirm Password</label>
<input class="form-control" type="password" name="passwordrepeat" ng-model="passwordrepeat" placeholder="Confirm Password" required compare-to="password">
<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="myForm.passwordrepeat.$dirty && myForm.passwordrepeat.$invalid"></span>
<span style="color:red" ng-show="myForm.passwordrepeat.$dirty && myForm.passwordrepeat.$invalid">
<span ng-show="myForm.passwordrepeat.$error.required">Second Password is Required!</span>
<span ng-show="myForm.passwordrepeat.$error">Passwords do not match!</span>
</span>
<span class="glyphicon glyphicon-ok form-control-feedback" ng-show="myForm.passwordrepeat.$dirty && !myForm.passwordrepeat.$invalid"></span>
</div>
Submit Button:
<button
class="btn btn-primary"
ng-disabled=
"myForm.email.$invalid ||
myForm.password.$invalid ||
myForm.passwordrepeat.$invalid">
Register
</button>
</form>
</div>
Can anyone advise on how I can make this code more concise? For starters, can this conditional ng-class expression be improved...
<div class="form-group has-feedback" ng-class="{true: 'has-success'}[myForm.passwordrepeat.$dirty]" ng-class="{true: 'has-error'}[myForm.passwordrepeat.$invalid]">
...this basically says, if the field is dirty, then if it's valid add the 'has-success' element else add 'has-error'. Is there a cleaner way of achieving this...
<span ng-show="myForm.email.$error.required">Email is required!</span>
<span ng-show="myForm.email.$error.email">Invalid email address!</span>
<span ng-show="myForm.email.$error.maxlength">Email is too long!</span>
Rather than listing every error? Finally, is there a preferred way of writing long expressions like this in the html template...
"myForm.email.$dirty && !myForm.email.$invalid"
I've tried to get my head around directives and I'm using one for the password confirm but I don't think they would make a big difference here (but I'm probably wrong).
Any help/advise on best practices greatly appreciated!
Your question is sort of vague, however here are some great articles that will help in your quest for better Angular based forms :)
Submitting AJAX Forms: The AngularJS Way
https://scotch.io/tutorials/submitting-ajax-forms-the-angularjs-way
AngularJS Form Validation
https://scotch.io/tutorials/angularjs-form-validation
And since you're using Bootstrap and Angular:
How to Correctly Use BootstrapJS and AngularJS Together
https://scotch.io/tutorials/how-to-correctly-use-bootstrapjs-and-angularjs-together
<!-- FORM -->
<!-- pass in the variable if our form is valid or invalid -->
<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->
<!-- NAME -->
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="name" required>
</div>
<!-- USERNAME -->
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
</div>
<!-- EMAIL -->
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="email">
</div>
<!-- SUBMIT BUTTON -->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
// create angular controller
validationApp.controller('mainController', function($scope) {
// function to submit the form after all validation has occurred
$scope.submitForm = function(isValid) {
// check to make sure the form is completely valid
if (isValid) {
alert('our form is amazing');
}
};
});