I want to write some condition inside an onsubmit handler. But whenever I write if-else inside it, It doesn't work. After commenting out the condition everything works perfectly.
const handleRegister = event => {
event.preventDefault();
const name = event.target.name.value;
const email = event.target.email.value;
const password = event.target.password.value;
const confirmPassword = event.target.confirmPassword.value;
console.log(confirmPassword);
**if(password === confirmPassword){
createUserWithEmailAndPassword(email, password);
}
else{
notMatched = <span className='text-danger'>Password does not matched</span>;
}**
}
I write it for this form
<form onSubmit={handleRegister} className='text-start'>
<label>Name</label><br />
<input className='w-100 mb-3' type="text" name="name" id="" placeholder='Your Name' /><br />
<label>Email</label><br />
<input className='w-100 mb-3' type="email" name="email" id="" placeholder='Your Email' /><br />
<label>Password</label><br />
<input className='w-100 mb-3' type="password" name="password" id="" placeholder='Your Password' /><br />
<label>Confirm Password</label><br />
<input className='w-100 mb-3' type="password" name="confirmPassword" id="" placeholder='Confirm Password' /><br />
{errorMessage}{notMatched}
<input className='mb-3' type="submit" value="REGISTER" />
</form>
Related
<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 :-)
I am using Laravel 5.1 and homestead.
My issue is when validation fails, the radio buttons do not repopulate with data from the original user's input.
My validation rules from PostRequest.php
public function rules()
{
//validating input text field --> this one works
$rules = ['owner' => 'required|max:15',];
//validating array of input text fields --> this too works
foreach($this->request->get('item') as $a => $z)
{
$rules['item.'.$a] = 'required';
}
//validating array of radio buttons --> does not return with data
foreach($this->request->get('radio') as $b => $y)
{
$rules['radio.'.$b] = 'required';
}
return $rules;
}
A segment of my view(blade.php)
<div class="row">
<div class="tcell col-xs-6">
<label for="item[0]" class="sr-only"></label>
<input class="form-control" id="item[0]" name="item[0]" type="text" placeholder="enter item" value="{ { old('item.0') } }"/>
</div>
<div class="tcell col-xs-6">
<div class="radio">
<input type="radio" id="s15" name="radio[0]" value="5" /><label for="s15" title="5">5</label>
<input type="radio" id="s14" name="radio[0]" value="4" /><label for="s14" title="4">4</label>
<input type="radio" id="s13" name="radio[0]" value="3" /><label for="s13" title="3">3</label>
<input type="radio" id="s12" name="radio[0]" value="2" /><label for="s12" title="2">2</label>
<input type="radio" id="s11" name="radio[0]" value="1" /><label for="s11" title="1">1</label>
</div>
</div>
</div>
...
<div class="tcell col-xs-6">
<div class="radio">
<input type="radio" id="s20" name="radio[1]" value="5" /><label for="s20" title="5">5</label>
<input type="radio" id="s19" name="radio[1]" value="4" /><label for="s19" title="4">4</label>
<input type="radio" id="s18" name="radio[1]" value="3" /><label for="s18" title="3">3</label>
<input type="radio" id="s17" name="radio[1]" value="2" /><label for="s17" title="2">2</label>
<input type="radio" id="s16" name="radio[1]" value="1" /><label for="s16" title="1">1</label>
</div>
</div>
The old() function worked for both input(text) and array of input(text). but I do not know how to apply it with radio buttons.
Thanks
Here's the solution
<input type="radio" id="s15" name="radio[1]" value="5" { { old('radio.1')=="5" ? 'checked='.'"'.'checked'.'"' : '' } } /><label for="s15" title="5">5</label>
<input type="radio" id="s14" name="radio[1]" value="5" { { old('radio.1')=="4" ? 'checked='.'"'.'checked'.'"' : '' } } /><label for="s14" title="4">4</label>
...
This will only help redirect back with the inputed data, however, validation will still fail if nothing is selected since nothing gets submitted. The fix is to use for loop instead of foreach loop. You must get the count of the radio buttons to iterate.
try to amend as following
blade template:
<div class="radio">
<input type="radio" id="s15" name="radio" value="5" /><label for="s15" title="5">5</label>
<input type="radio" id="s14" name="radio" value="4" /><label for="s14" title="4">4</label>
<input type="radio" id="s13" name="radio" value="3" /><label for="s13" title="3">3</label>
<input type="radio" id="s12" name="radio" value="2" /><label for="s12" title="2">2</label>
<input type="radio" id="s11" name="radio" value="1" /><label for="s11" title="1">1</label>
</div>
Form request
public function rules()
{
//validating input text field --> this one works
$rules = ['owner' => 'required|max:15', 'radio' => 'required'];
//validating array of input text fields --> this too works
foreach($this->request->get('item') as $a => $z)
{
$rules['item.'.$a] = 'required';
}
return $rules;
}
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);
});
Here is the HTML:
<form id="login_form" data-ajax="false">
<label for="username" class="ui-hidden-accessible">Username:</label>
<input type="text" name="username" id="username" value="" placeholder="Username"/>
<label for="password" class="ui-hidden-accessible">Password:</label>
<input type="password" name="password" id="password" value="" placeholder="Password"/>
<button data-theme="b" id="submit" type="submit">Login</button>
</form>
Here is the js:
$('#login_form').on('submit', function (e) {
var $this = $(this);
e.preventDefault();
//some validation here
if (formValid)
{
$.mobile.showPageLoadingMsg();
$.post(loginURL, $this.serialize(), function (response) {
$.mobile.hidePageLoadingMsg();
//response handling here
}, 'jsonp');
}
return false;
});
So the problem is:
The form still sends the GET query.
What is wrong here?
PS: testing on ripple emulator if it matters
I have the problem of doing the validation of fields myself. Now there are 5-6 fields in the form. So I am checking each one in my controller, and if there is wrong i wish to load the view again and pass the error array to it.
I achieved the above functionality with this:
<html>
<head>
<title>My Form</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
</head>
<body>
<?php
echo $fullname;
?>
<?
echo form_open('/membership/register');
?>
<h5>Username</h5>
<input type="text" name="username" value="" size="50" />
<h5>Password</h5>
<input type="text" name="password" value="" size="50" />
<h5>Password Confirm</h5>
<input type="text" name="cpassword" value="" size="50" />
<h5>Email Address</h5>
<input type="text" name="email" value="" size="50" />
<h5>Mobile</h5>
<input type="text" name="mobile" value="" size="15" />
<h5>Home</h5>
<input type="text" name="home" value="" size="15" />
<h5>Full Name</h5>
<input type="text" name="fullname" value="" size="100" />
<br><br>
<div><input type="submit" value="Submit" /></div>
</form>
</body>
</html>
and in controller the code is:
if (preg_match('#[0-9]#',$fullname))
{
$errors['fullname'] = 'wrong name format!';
$this->load->view('register', $errors);
}
Now the real problem I have is if the many fields are wrong. I want to have $errors array passed to view and accessed there for all the values it contains. so I don't have to specify $fullname or $mobile to get the value. How can this be done? as to show the user everything missing in one go
First of all I advise using codeigniter's built in form validation class
Here is how I usually process my validation in the controller:
if ($this->input->post())
{
// process the POST data and store accordingly
$this->form_validation->set_rules('username', 'Username', 'trim|required|min_length[5]|xss_clean');
$this->form_validation->set_rules('password', 'Password', 'trim|required|min_length[6]|xss_clean');
// the rest of your form fields validation can be set here
if ($this->form_validation->run() == FALSE)
{
// validation hasnt run or has errors, here just call your view
$this->load->view('same_view_file_with_the_form', $data);
}
else
{
// process the POST data upon correct validation
}
}
In my view file I call each error like this:
<h5>Username</h5>
<input type="text" name="username" value="" size="50" />
<span class="error-red"><?php echo form_error("username"); ?></span>
<h5>Password</h5>
<input type="text" name="password" value="" size="50" />
<span class="error-red"><?php echo form_error("password"); ?></span>
<h5>Password Confirm</h5>
<input type="text" name="cpassword" value="" size="50" />
<span class="error-red"><?php echo form_error("cpassword"); ?></span>
Do all your checks in the controller prior to binding errors into the view.
e.g.
$errors = array();
if (preg_match('#[0-9]#',$fullname))
{
$errors['fullname'] = 'wrong name format!';
}
if ( do_something_to_validate(mobile) )
{
$errors['mobile'] = 'invalid mobile';
}
// after checking everything do this
$this->load->view('register', $errors);