<input type="email" class="form-control" id="email" placeholder="Enter
email" name="email" onblur="validation()">
<input type="text" name="war-email" id="war-email" value=""
class="error" readonly hidden/><br>
<input type="password" class="form-control" id="pwd"
placeholder="Enter password" name="pwd" onblur="validation()">
<input type="text" name="war-pas" id="war-pas" value="" class="error"
readonly hidden/><br>
<input type="cpassword" class="form-control" id="cpwd"
placeholder="Enter password" name="cpwd" onblur="validation()">
<input type="text" name="war-cpas" id="war-cpas" value=""
class="error" readonly hidden/><br>
<script>
function validation(){
if(document.getElementById("email").value==""){
$("#war-email").show();
document.getElementById("war-email").value="this is invalid email";
document.getElementById("war-email").style.color="red";
}else{
document.getElementById("war-email").value="this is valid email";
document.getElementById("war-email").style.color="green";
}
if(document.getElementById("pwd").value==""){
$("#war-pas").show();
document.getElementById("war-pass").value="Short password";
document.getElementById("war-pas").style.color="red";
}else{
document.getElementById("war-pas").value="Strong password";
document.getElementById("war-pas").style.color="green";
}
var len=document.getElementById("cpwd").value;
if(document.getElementById("pwd").value!=
document.getElementById("cpwd").value==)
{
$("#war-cpas").show();
document.getElementById("war-cpass").value="Both password should
matched";
document.getElementById("war-cpas").style.color="red";
}else{
document.getElementById("war-cpas").value="matched..!!";
document.getElementById("war-cpas").style.color="green";
}
}
</script>
First of all, put your code in a snippet so it will be easier for us to understand. Anyway, I'll tell how to attach blur event using jQuery.
$("input#name").on("blur", function()
{
if(!this.value)
{
alert("Please fill out the name");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="myForm">
<label>Your Name</label>
<input type="text" id="name">
</form>
If you need any other help, just let me know :-)
Related
I am trying to take an input from a form made in a jsp called "start.jsp".
<body>
<form action=/addResults"method="post" modelAttribute="results" required="true">
<label for="email">Email Address:</label><br>
<input type="text" id="email" name="email" maxlength="50"required><br>
<label for="fullname">Full Name:</label><br>
<input type="text" id="fullname" name="fullname" maxlength="100"required>
<label for="age">Age (0-120):</label><br>
<input type="text" id="age" name="age" min="0" max="120"required>
<label for="gender">Gender:</label><br>
<input type="text" id="gender" name="gender" maxlength="45"required>
<input type="submit" value="Submit">
</form>
</p>
</body>
I'm then using code in my Controller to add this to a Class. Below is my controller code.
#RequestMapping("/addResults")
public String newHotel(Model model) {
model.addAttribute("results", new TestResults());
return "start";
}
But when I execute my Spring project it gives me an error of 404-not found. I've tried checking and rechecking my links and I can't understand how the links can't find the other pages etc. Any help would very great as I'm quite new to spring and the franework. Fred
When I use Vee-validate library in Vuejs, when I focus on password field, it show the error not match with password confirm.
My code:
<input v-validate="'required|min:6|confirmed'" type="password" class="form-control" id="password" name="password" placeholder="New Password" v-model="password"></input>
<span class="is-danger" v-if="errors.has('password')">{{errors.first('password')}}</span>
<input v-validate="'required'" type="password" class="form-control" id="password_confirmation" name="password_confirmation" placeholder="Verify password">
How can I use it and do not display the errors until focus password confirm field?
Okay, I searched for the solution longer than I should but there doesn't seem a built-in way in vee-validate, so I came up with my own solution.
Vue.use(VeeValidate)
new Vue({
el: '#app',
data: {
password: '',
password_confirmation: ''
},
computed: {
onConfirm () {
if(this.errors.items.length){
return this.errors.items.find(f => {
return f.rule !== "confirmed"
})
}
}
}
})
<script src="https://unpkg.com/vee-validate#2.0.5/dist/vee-validate.js"></script>
<script src="https://unpkg.com/vue#2.5.9/dist/vue.js"></script>
<div id="app">
<input v-validate="'required|min:6|confirmed'"
type="password"
class="form-control"
id="password"
name="password"
placeholder="New Password"
v-model="password">
</input>
<span class="is-danger"
v-if="errors.has('password') && onConfirm">
{{errors.first('password')}}
</span>
<input v-validate="'required'"
type="password"
class="form-control"
id="password_confirmation"
name="password_confirmation"
placeholder="Verify password"
v-model="password_confirmation"
>
<span class="is-danger"
v-if="!onConfirm &&
password_confirmation">
{{errors.first('password')}}
</span>
</div>
i need to stop insert data when refresh page iam new in codeigniter and can't do redirect easly,please support
view:pages/home.php view which has a form
<html>
<head></head>
</body>
<?php echo validation_errors(); ?>
<?php echo form_open('speed/insert_to_db'); ?>
Branch: <input type="text" name="branch" /><br/>
Business Unit: <input type="text" name="buinessUnit" /><br/>
Device Type: <input type="text" name="deviceType" /><br/>
Brand: <input type="text" name="brand" /><br/>
Device Model: <input type="text" name="deviceModel" /><br/>
SN: <input type="text" name="SN" /><br/>
status: <input type="text" name="status" /><br/>
department: <input type="text" name="department" /><br/>
username: <input type="text" name="username" /><br/>
notes: <input type="textarea" name="notes" /><br/>
computername: <input type="text" name="computerName" /><br/>
Save:<input type="submit" name="save" />
</form>
</body>
</html>
model:add_model model which has insert_to_db function
public function insert_into_db(){
$post=$this->input->post();
$data=array('Branch'=>$post['branch'],'BusinessUnit'=>$post['buinessUnit'],'DeviceType'=>$post['deviceType'],'Brand'=>$post['brand'],'DeviceModel'=>$post['deviceModel'],'SN'=>$post['SN'],'Status'=>$post['status'],'Departmant'=>$post['department'],'UserName'=>$post['username'],'Notes'=>$post['notes'],'ComputerName'=>$post['computerName']);
$this->db->insert('hardware_assets', $data);
return $this->db->insert_id(); // if using mysql
}
}
controller:
<?php
class Speed extends CI_Controller {
function insert_to_db()
{
$this->load->model('add_model');
if($this->input->post('save')){
$this->add_model->insert_into_db();
$this->load->view('pages/home');//loading success view
}
}
}
I think you should try this in your controler:
function insert_to_db()
{
$this->load->model('add_model');
if( isset( $this->input->post('save') ) )
{
$this->add_model->insert_into_db();
//loading success view
$this->load->view('pages/home');
}
}
I want to fill this form, but i dont know how to do it since it only have a classname.
All the examples i saw have an id or a name, to fill the form and submit it, please help.
<form class="header_form" method="post" action="">
<div class="lgn-items">
<div class="login_item">
<label>Email</label>
<input type="text" name="email" tabindex="1" class="inputtext" id="email" />
</div>
<div class="login_item" >
<label>Password</label>
<input type="password" name="password" tabindex="2" class="inputtext" id="pass" />
</div>
<div class="lgn-add">
Registration <span>|</span>
Forgot your password ?
<div class="rembo">
<input type="checkbox" name="remember" value="1" /> Remember me
</div>
</div>
</div>
<div class="login_item lgn-btn" >
<input type="submit" name="login_button" value="Login" tabindex="3" class="login" />
</div>
</form>
You can access to your form using any selector. In your case you to it like this.
casper.then(function () {
casper.fill('form.header_form', {
/** Your parameters here **/
}, true);
});
I am in the process of learning AngularJS, still at the most basic stages of form validation. I followed the official tutorial here, and managed to get the validation working like they have, where if input is invalid, the background changes colour.
That is all nice and counts as an important step in my learning, but how do I move a little further and have the validation add / remove CSS classes required by Bootstrap to show visual cues?
Here is my HTML code:
<form novalidate class="css-form">
<div class="form-group">
<label class="control-label" for="fname">First Name</label>
<input type="text" id="fname" placeholder="First Name" class="form-control" ng-model="user.fname" required >
</div>
<div class="form-group">
<label class="control-label" for="lname">Last Name</label>
<input type="text" id="lname" placeholder="Last Name" class="form-control" ng-model="user.lname" required >
</div>
<div class="form-group">
<label class="control-label" for="email">Email</label>
<input type="email" id="email" placeholder="Email" class="form-control" ng-model="user.email" required >
</div>
<div class="form-group">
<label class="control-label" for="password">Password</label>
<input type="password" id="password" placeholder="Password" class="form-control" ng-model="user.password" required >
</div>
<div class="form-group">
<label class="control-label" for="emailpref">Want annoying emails?</label>
<select class="form-control" ng-model="user.emailpref" required>
<option value="Null">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
In the Bootstrap3 documentation, it says that if I need to show a valid state, I must add a CSS class of has-success like so:
<div class="form-group has-success">
<label class="control-label" for="fname">First Name</label>
<input type="text" id="fname" placeholder="First Name" class="form-control" ng-model="user.fname" required >
</div>
How can I get my AngularJS validation to do that? At the moment, my AngularJS is as follows:
function UserCtrl($scope) {
$scope.master = {};
$scope.user = { fname: "J", lname: "Watson", password: "test", email: "j.watson#world.com", emailpref: "Yes" };
$scope.update = function(user) {
$scope.master = angular.copy(user);
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}
To add dynamic classes based on field validation you need to do two things
Give your form a name
`<form novalidate class="css-form" name="form1">`
Give each input field a name too. You can then use expression to determine state of error of a field
<div class="form-group has-success" ng-class="{'has-success':form1.fname.$invalid}">
<label class="control-label" for="fname">First Name</label>
<input type="text" id="fname" placeholder="First Name" class="form-control" ng-model="user.fname" required name="fname">
</div>
Please go through the form guide http://docs.angularjs.org/guide/forms for more details.
You can use angular-validator.
Disclaimer: I am the author of angular-validator