The input field of my website looks like this:(click here to view image)
It's code in jsx file looks like this:
render: function () {
return (
<form id="addcourse" role="form" className="form-horizontal" enctype="multipart/form-data" ref="courseForm">
<fieldset>
<CategoryLoader callback={this.handleCategoryChange}/>
<div className="form-group">
<label className="control-label col-md-2 col-md-offset-1">Title</label>
<div className="col-md-7 col-md-offset-1">
<input name="title" type="text" maxLength="6" id="abcd" className="form-control" ref="title" placeholder="Title (Maximum 100 characters)"/>
</div>
</div>
<div className="form-group">
<label className="control-label col-md-2 col-md-offset-1">Course Image</label>
<div className="col-md-7 col-md-offset-1">
<input name="image" type="file" className="form-control" ref="image"/>
<p className="help-block">Upload image for the course </p>
</div>
</div>
<div className="form-group">
<label className="control-label col-md-2 col-md-offset-1">Enrollment Type</label>
<div className="col-md-7 col-md-offset-1">
<select ref="enrollment_type" name="enrollment_type" className="form-control">
<option value="O">Open</option>
<option value="M">Moderated</option>
</select>
</div>
</div>
<div className="form-group">
<div className="col-md-2 col-md-offset-2 addcoursebutton">
<button ref="submit" className="btn btn-primary" type="button" onClick={this.add_course}>Add
Course
</button>
</div>
<div className="col-md-1">
<button type="button" onClick={this.props.closeCallBack} className="btn btn-danger">
Close
</button>
</div>
</div>
</fieldset>
</form>
);
I've tried maxLength="6".
It won't take more than 6 characters in input but it doesn't give any error like "Maximum length is 6 characters."
So, when the user starts typing in that field, I want it to display a message under input field,"Maximum of 6 characters are allowed".
How can I do that?
try this :
$(elementId).onchange(function(){
var len = this.val.length;
if (len > 5)
alert("You cannot exceed max of 6 characters").
});
you can also use 'onkeypress' event as well and any other type of result than alert, whatever suits
This is quite simple and react way of doing this is using state.
if you need more explanation let me know. hope this will help.
checkMaxLen = e => {
if (e.target.value.length > 6) {
this.setState({ errorText: "Length cant exceed more then 6" });
} else {
if (this.errorText) {
this.setState({ errorText: "" });
}
}
};
<input type="text"
onChange={this.checkMaxLen}
/>
{this.state.errorText && <span>{this.state.errorText}</span>}
You can even achieve it with CSS only. Here is the explanation
Related
I am working on a form where I am showing a div when a user submits the form and it checks if all the fields values are not blank. I have achieved that part and it is working fine.
Now the problem is when I am validating the phone number using regex, it is showing error but still displays the div and form is also submitted successfully. It should not get submit till the user enters a correct phone number, it gives an error and still, the form gets submitted. I know the error is there but I am not understanding where I am wrong. Please guide me.
function mySub() {
const user = document.getElementById('pmname').value.trim();
const uemail = document.getElementById('pmemail').value.trim();
const uphone = document.getElementById('pmphone').value.trim();
const uregx = /^[0-9]{10}$/;
const upmmb = uregx.test(uphone);
if (user == "" || uemail == "" || uphone == "" || upmmb == "") {
document.getElementById('agy').style.display = 'none';
alert("Enter Valid Mobile Number");
document.getElementById('pmphone').focus();
} else {
document.getElementById('agy').style.display = 'block';
}
}
#agy {
display: none;
}
<form method="post" action="#">
<div id="agy">
<div class="agent-details">
<div class="d-flex align-items-center">
<div class="agent-image">
<img class="rounded" src="#" alt="Jazz" width="70" height="70" />
</div>
<ul class="agent-information list-unstyled">
<li class="agent-name"><i class="houzez-icon icon-single-neutral mr-1"></i> Jazz</li>
<li class="agent-link">View Listings</li>
</ul>
</div>
</div>
</div>
<div class="form-group">
<input class="form-control" name="name" id="pmname" value="" type="text" placeholder="Name" />
</div>
<div class="form-group">
<input class="form-control" name="mobile" id="pmphone" value="" type="text" placeholder="Phone" />
</div>
<div class="form-group">
<input class="form-control" name="email" id="pmemail" value="" type="email" placeholder="Email" />
</div>
<div class="form-group form-group-textarea">
<textarea class="form-control hz-form-message" name="message" rows="4" placeholder="Message">Hello, I am interested in ...</textarea>
</div>
<div class="form-group">
<label class="control control--checkbox m-0 hz-terms-of-use">
<input type="checkbox" id="ppa" name="privacy_policy" checked="" />By submitting this form I agree to <a target="_blank" href="https://propertymakkerz.com/pm/property/sai-ashishkaranjadepanvel/">Terms of Use</a>
<span class="control__indicator"></span>
</label>
</div>
<div class="form_messages"></div>
<button type="button" class="houzez_agent_property_form btn btn-secondary btn-full-width" onclick="mySub()"><span class="btn-loader houzez-loader-js"></span> Send Message</button>
</form>
can you help me solve my problem
I want to get the value of codeIsbn which is in the jquery keydown function, then I will place it in the value bookCode
let codeIsbn;
$('#bookISBN').keydown(function(){
let bookIsbn = $('#bookISBN').val();
let splitISBN = bookIsbn.split('-');
codeIsbn = splitISBN[1]+'-'+splitISBN[2]+'-'+splitISBN[3];
//console.log(codeIsbn);
});
console.log(codeIsbn);
$('#bookCode').val(codeIsbn);
Html Code
<div class="row">
<div class="col-lg-6 col-sm-12">
<div class="form-group">
<label for="">ISBN Buku</label>
<input type="text" name="isbnBuku" class="form-control" id="bookISBN" data-inputmask="'mask': ['999-999-999-99-9']" data-mask placeholder="ISBN Buku">
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="form-group">
<label for="">Kode Buku</label>
<input type="text" name="kodeBuku" id="bookCode" class="form-control" placeholder="Kode Buku">
</div>
</div>
</div>
The error that appears in the console log is undefined
You want to use keyup, rather than keydown. Assuming the ISBN number should be greater than 10 characters this should work for you. You will want to probably do something different to validate the isbn format and length. This isn't a perfect solution ready for production, but it's a step in the right direction.
$(function(){
let codeIsbn;
$('#bookISBN').keyup(function(){
if( $(this).val().length > 9 ) {
let bookIsbn = $('#bookISBN').val();
let splitISBN = bookIsbn.split('-');
codeIsbn = splitISBN[0]+'-'+splitISBN[1]+'-'+splitISBN[2];
if( codeIsbn.length > 9 ) {
$('#bookCode').val(codeIsbn);
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-6 col-sm-12">
<div class="form-group">
<label for="">ISBN Buku</label>
<input type="text" name="isbnBuku" class="form-control" id="bookISBN" data-inputmask="'mask': ['999-999-999-99-9']" data-mask placeholder="ISBN Buku">
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="form-group">
<label for="">Kode Buku</label>
<input type="text" name="kodeBuku" id="bookCode" class="form-control" placeholder="Kode Buku">
</div>
</div>
</div>
I have this code, I'm trying to get the "impressions" element.value to update as the user types in the budget field, what is the best practise to get a result? the impressions should be the budget*350.
<div class="col">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">£</div>
</div>
<input id="budget" type="text" class="form-control" name="campaign_budget" placeholder="100" value="<?php if(!empty($campaign_budget)) { echo $campaign_budget; } ?>">
</div>
<small class="form-text text-muted">You will recieve <span id="impressions">0</span> with this budget.</small>
</div>
You can do this way, I've used static budget value for the demo purpose, you can modify and add your PHP code here.
const impression = document.getElementById('impressions');
document.getElementById("budget")
.addEventListener('keyup', (e) => {
impression.innerHTML = e.currentTarget.value * 350;
});
<div class="col">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">£</div>
</div>
<input id="budget" type="text" class="form-control" name="campaign_budget" placeholder="100" value="50">
</div>
<small class="form-text text-muted">You will recieve <span id="impressions">0</span> with this budget.</small>
</div>
I'm still learning to programme on AngularJS.
I want to get values from the input box and then click on the button I want to save them in the database.
My database table is called "user". I have columns like id, username, password, name.
I have two checkbox.When I click on first checkbox(Edit) it displaying "div myVar",when i click on second checkbox(Add new user) it displaying "div myVar1".
I want to activate this button "Add" to add input box values to database MySQL. Please help me.
I have this html code:
<label><input type="checkbox" ng-model="myVar">Edit</label>
<label><input type="checkbox" ng-model="myVar1">Add new user</label>
<div ng-show="myVar">
<div class="form">
<form ng-submit="saveItem(userForm.$valid)" name="userForm">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">User</label>
<input type="text" class="form-control" required ng-model="activeItem.username" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control" required id="password" ng-model="activeItem.password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Operator</label>
<input type="text" class="form-control" required id="username" ng-model="activeItem.name" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Save</button>
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form><form ng-submit="createUser(userForm.$valid)" name="userForm1">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">User</label>
<input type="text" class="form-control1" ng-model="usernamee" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control1" ng-model="passwordd"required id="password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Operator</label>
<input type="text" class="form-control1" ng-model="namee" required id="username" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-click="createUser();" type="submit">Add user</button>
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form>
And Angular code:
$scope.createUser=function()
{
//console.log($scope.activeItem);
//delete $scope.activeItem.hash_method
var objectToSave = {
username: $scope.usernamee,
password: $scope.passwordd,
name: $scope.namee,
id: $scope.id
};
{
defaultAdapter.query('INSERT INTO users(username,password,name,id) VALUES(username = :usernamee, password = :passwordd,name = :namee WHERE id =:id)',
{ replacements: objectToSave, type: Sequelize.QueryTypes.UPDATE }
).then(projects => {
console.log(projects);
$scope.editMode = false;
$scope.activeItem = false;
$scope.refresh();
});
}
}
I am new in angular 2, i am making a "User Register" form but it shows error in "Property does not exist on type" in Phone number Validation.
I am compiling in JIT and AOT.
In JIT compiler shows error message and run my user register form it is working properly. but when i compile with AOT shows compilation error.
I am reading the angular 2 form validation official doc here is the link Angular 2 form validation
Below is my Html Form and compiler Output
Html Form
<form class="ui large form" method="post" (ngSubmit)="onSubmit(registerForm.form.valid)" #registerForm="ngForm" novalidate>
<sm-loader [complete]="!formSubmited" class="inverted" text="Loading..."></sm-loader>
<div class="form-group">
<div class="col-md-12 img-bottom">
<div class="col-md-offset-4">
<img (click)="profileImage.click()" class="img img-responsive img-circle ui middle aligned tiny circular image profileImage"
[src]="profileImageSrc" />
<input class="form-control user-reg-img" (change)="fileChangeEvent($event)" type="file" accept="image/*" #profileImage [hidden]="true"
/>
</div>
<div class="col-md-12 image-padding">
<span class="user-reg-img-name" (click)="profileImage.click()">{{profileImageName}}</span>
</div>
</div>
</div>
<div class="form-group">
<label><strong>Signup with Email Address:</strong></label>
</div>
<div class="form-group">
<p class="success text-center">{{successMessage}}</p>
<p class="error text-center">{{errorMessage}}</p>
<div class="field">
<input type="text" name="name" placeholder="Name" [(ngModel)]="register.name" #name="ngModel" required class="form-control input-reg"
/>
<div [hidden]="name.valid || name.pristine" class="error text-left">
Name is required
</div>
</div>
</div>
<div class="form-group">
<div class="field">
<input class="form-control input-reg" type="email" name="email" placeholder="Email" [(ngModel)]="register.email" #email="ngModel"
required />
<div [hidden]="email.valid || email.pristine" class="error text-left">
Email is required
</div>
</div>
</div>
<div class="form-group">
<input type="text" id="mobile" class="form-control input-reg" required minlength="10" maxlength="10" name="mobile" [(ngModel)]="register.mobile"
placeholder="Phone Number" #mobile="ngModel" pattern="[0-9]+">
<div *ngIf="mobile.errors && (mobile.dirty || mobile.touched)">
<div class="error text-left" [hidden]="!mobile.errors.required">
Mobile Number is required
</div>
<div class="error text-left" [hidden]="!mobile.errors.minlength">
Mobile Number must be at least 10 characters long.
</div>
<div class="error text-left" [hidden]="!mobile.errors.maxlength">
Monile Number cannot be more than 10 characters long.
</div>
</div>
</div>
<div class="form-group">
<div class="field">
<input class="form-control input-reg" type="password" name="password" placeholder="Password" [(ngModel)]="register.password"
#password="ngModel" required />
<div [hidden]="password.valid || password.pristine" class="error text-left">
Password is required
</div>
</div>
</div>
<div class="form-group">
<input type="checkbox" name="isAgree" [(ngModel)]="register.isAgree" #isAgree="ngModel" required />
<label id="label-terms-cond">I Agree to Post Bucks Terms & Conditions</label>
<div [hidden]="!showTermsAgreeErrorMsg" class="error text-left">
Please agree the terms and conditions to continue
</div>
</div>
<div class="form-group">
<textarea rows="4" class="form-control font-small terms-cond-textarea" rows="7">You must follow any policies made available to you within the Services.</textarea>
</div>
<div class="form-group">
<button class="fluid yellow large ui button btn btn-block btn-warning reg-btn-submit" type="submit">Signup</button>
</div>
</form>
AOT Output
Thanks in advance
Vikram
It looks the JIT compiler will never check the type of mobile.errors, but AOT check it at compilation by looking this line :
<div *ngIf="mobile.errors && (mobile.dirty || mobile.touched)">
According that in this line mobile.errors is a boolean, you'll obtain your traces...
I can't reproduce this bug (version problem ?), but maybe the following code will fix it :
<div *ngIf="(mobile.errors != null) && (mobile.dirty || mobile.touched)">
There is an opened issue here : https://github.com/angular/angular/issues/11425
Here is my answer, there is actual problem of required which is not found under mobile.errors object. below is my single line code.
!mobile.errors['required']
If object field not found then we use as array in template.