I am stuck at here, i'm trying to validate multiple textfield with same name, but it validates only the first input text and the rest nothing shows.
<form id = "frm_org_id">
<input type="text" name="email_address[]" placeholder="Email address" class="email_address">
<input type="text" name="email_address[]" placeholder="Email address" class="email_address">
<input type="text" name="email_address[]" placeholder="Email address" class="email_address">
<input type="text" name="email_address[]" placeholder="Email address" class="email_address">
</form>
js
$('#frm_org_id').bootstrapValidator({
fields:{
'email_address[]':{
validators:{
notEmpty:{
message: ' required'
},
emailAddress:{
message: 'Invalid email address'
}
}
}
}
});
How do i validate independently each of the field when typing?
You should put input tag in div with class="form-group".
t.e.:
<form id = "frm_org_id">
<div class="form-group">
<input type="text" name="email_address[]" placeholder="Email address" class="email_address">
</div>
<div class="form-group">
<input type="text" name="email_address[]" placeholder="Email address" class="email_address">
</div>
<div class="form-group">
<input type="text" name="email_address[]" placeholder="Email address" class="email_address">
</div>
<div class="form-group">
<input type="text" name="email_address[]" placeholder="Email address" class="email_address">
</div>
</form>
for working example see :
https://github.com/nghuuphuoc/bootstrapvalidator/blob/master/demo/multiple.html
Related
I have created a simple form for contact-us section on a website. For submit button, initially I used type=submit but later came across a suggestion to change it to type=button. However the code is not working for submit as well as reset. Can someone please help to point out whats wrong in my code below.
function submitForm() {
var frm = document.getElementById('contactFormAP');
alert('H2');
frm.submit(); // Submit the form
alert('H3');
frm.reset(); // Reset form data
return false;
}
<form class="contactForm" action="email_form.php?do=send" method="post" role="form" id="contactFormAP">
<div class="form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="contactnumber" id="contactnumber" placeholder="Contact Number" data-rule="minlen:10" data-msg="Please enter correct contact number with country code" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validation"></div>
</div>
<div id="sendmessage">Your message has been sent. Thank you!</div>
<div id="errormessage"></div>
<div class="text-center">
<input type="button" value="Submit" id="submitbtn" onclick="submitForm()">
</div>
</form>
Use the OnSubmit-Listener instead:
https://www.w3schools.com/jsref/event_onsubmit.asp
First of all, I think this question maybe is having an answer somewhere here on site and sorry for being repetitive but I can`t find what I want.
So... I have a form with 4 inputs, I want when someone clicks on the input to type in the value background color to be changed, and when the user clicks somewhere else to change it back to normal.
If anyone has multiple examples please write it down, I want to know more about how javascript works.
<form>
<div>
<label for="name">NAME</label>
<input class="input" type="text" name="name" id="name" placeholder="Please enter your name">
</div>
<div>
<label for="company">COMPANY</label>
<input class="input" type="text" name="company" id="company"
placeholder="Leave it empty if you don`t have a name">
</div>
<div>
<label for="phone">PHONE</label>
<input class="input" type="text" name="phone" id="phone"
placeholder="Please,enter your mobile phone">
</div>
<div>
<label for="email">EMAIL</label>
<input class="input" type="email" name="email" id="email" placeholder="Your email address">
</div>
<div class="message">
<label for="message">MESSAGE</label>
<textarea class="input" name="message" id="message" cols="54" rows="15"></textarea>
</div>
Send
</form>
Use :focus pseudo-class selector to apply CSS when the element is focused.
input:focus {
background-color: #ddd;
}
<form>
<div>
<label for="name">NAME</label>
<input class="input" type="text" name="name" id="name" placeholder="Please enter your name">
</div>
<div>
<label for="company">COMPANY</label>
<input class="input" type="text" name="company" id="company" placeholder="Leave it empty if you don`t have a name">
</div>
<div>
<label for="phone">PHONE</label>
<input class="input" type="text" name="phone" id="phone" placeholder="Please,enter your mobile phone">
</div>
<div>
<label for="email">EMAIL</label>
<input class="input" type="email" name="email" id="email" placeholder="Your email address">
</div>
<div class="message">
<label for="message">MESSAGE</label>
<textarea class="input" name="message" id="message" cols="54" rows="15"></textarea>
</div>
Send
</form>
UPDATE : If you want to toggle between states on each click then you need to toggle(probably a class) based on click event.
I have 2 forms in which want to send the user input from new form to old form. Im trying to find the most dynamic way to accomplish that.
I tried the for loop and Jquery each function but gets confused
<form class="new-form">
<input type="text" placeholder="Name" name="new-name" class="new-name">
<input type="tel" placeholder="phone" class="new-phone" name="new-phone">
<input type="email" placeholder="email" class="new-email" name="new-email">
</form>
<form class="old-form hidden">
<input type="text" placeholder="Name" name="name" class="name">
<input type="tel" placeholder="phone" class="phone" name="phone">
<input type="email" placeholder="email" class="email" name="email">
</form>
You could do something like this:
$('.new-form input').keyup(function() {
var p = $(this).attr("placeholder");
var v = $(this).val();
$('.old-form input[placeholder=' + p + ']').val(v)
});
Assuming that the placeholder is the same, it uses the placeholder to identify the same element in the old form and then copies the value to that on .keyup() event
Demo
$('.new-form input').keyup(function() {
var p = $(this).attr("placeholder");
var v = $(this).val();
$('.old-form input[placeholder=' + p + ']').val(v)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="new-form">
<input type="text" placeholder="Name" name="new-name" class="new-name">
<input type="tel" placeholder="phone" class="new-phone" name="new-phone">
<input type="email" placeholder="email" class="new-email" name="new-email">
</form>
<form class="old-form hidden">
<input type="text" placeholder="Name" name="name" class="name">
<input type="tel" placeholder="phone" class="phone" name="phone">
<input type="email" placeholder="email" class="email" name="email">
</form>
You can use keyup to set values as you type
$('.new-name').keyup(function(){
$('.name').val($(this).val())
})
$('.new-phone').keyup(function(){
$('.phone').val($(this).val())
})
$('.new-email').keyup(function(){
$('.email').val($(this).val())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="new-form">
<input type="text" placeholder="Name" name="new-name" class="new-name">
<input type="tel" placeholder="phone" class="new-phone" name="new-phone">
<input type="email" placeholder="email" class="new-email" name="new-email">
</form>
<form class="old-form hidden">
<input type="text" placeholder="Name" name="name" class="name">
<input type="tel" placeholder="phone" class="phone" name="phone">
<input type="email" placeholder="email" class="email" name="email">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="new-form">
<input type="text" placeholder="Name" name="new-name" class="new-name" onkeyup="$('#name').val(this.value)">
<input type="tel" placeholder="phone" class="new-phone" name="new-phone" onkeyup="$('#phone').val(this.value)">
<input type="email" placeholder="email" class="new-email" name="new-email" onkeyup="$('#email').val(this.value)">
</form>
<form class="old-form hidden">
<input type="text" placeholder="Name" name="name" class="name" id="name">
<input type="tel" placeholder="phone" class="phone" name="phone" id="phone">
<input type="email" placeholder="email" class="email" name="email" id="email">
</form>
I'm trying to create a simple sign in/sign up form that sends an alert to the user once they've hit the submit button. The alert will show the user all the info they have put in (name, email, password). When I run the app the alert comes up as "undefined".
Here's my code:
HTML:
<form>
<h2>Sign In</h2>
<label>User Name:</label>
<input type="text" placeholder="Enter Username" name="username" required>
<label>Password:</label>
<input type="password" placeholder="Enter Password" name="password" required>
<input type="submit" class="submit-button si-submit" value="Sign In">
<div id="remember"><input type="checkbox" checked="checked"><span>Remember me</span></div>
</form>
</div>
<div class="sign-up">
<form>
<h2>Sign Up</h2>
<label>Name:</label>
<input type="text" placeholder="Enter your name" value="" id="name" required>
<label>Email:</label>
<input type="email" name="email" id="email" required placeholder="Enter a valid email address">
<label>Password:</label>
<input type="password" placeholder="Enter your password" name="password" id="password" required>
<input class="submit-button su-submit" type="submit" id="myButton">
</form>
JS:
var userInfo = document.getElementById("name");
document.getElementById("myButton").addEventListener("click", function() {
alert(userInfo.value);
});
Your code seems to work...
var userName = document.getElementById("name"),
userEmail = document.getElementById("email"),
userPassword = document.getElementById("password");
document.getElementById("myButton").addEventListener("click", function() {
alert(userName.value);
alert(userEmail.value);
alert(userPassword.value);
});
<div class="sign-up">
<form>
<h2>Sign Up</h2>
<label>Name:</label>
<input type="text" placeholder="Enter your name" value="" id="name" required>
<label>Email:</label>
<input type="email" name="email" id="email" required placeholder="Enter a valid email address">
<label>Password:</label>
<input type="password" placeholder="Enter your password" name="password" id="password" required>
<input class="submit-button su-submit" type="submit" id="myButton">
</form>
</div>
this is my form
<form method="post" action="{{url('/vpage')}}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<label>First Name</label>
<input type="text" name="firstname" placeholder="First Name" value="{{$user->firstname}}" >
<label>Email Address</label>
<input type="text" name="email" placeholder="Email Address" value="{{$user->email}}" >
<label>Phone Number <span> (optional)</span></label>
<input type="text" name="phone" placeholder="(888) 888-888" value="{{$user->phone}}" >
<button id="hitme" class="submitBTN getstart" type="submit" onclick='return false;'> Get Started </button>
</form>
this is div outside the form
<div class="vgasRit">
<p>SUMMARY</p>
<div class="sfieldz w100">
<label>Name:</label>
<input type="text" placeholder="John Smith" value="{{$user->firstname}}">
</div>
<div class="w100">
<label>Email Address:</label>
<input type="text" placeholder="johnsmith#gmail.com" value="{{$user->email}}" >
</div>
<div class="w100">
<label>Phone Number:</label>
<input type="text" placeholder="(888) 888-888" value="{{$user->phone}}">
</div>
</div>
I want to access the value of the "fistname" , "lastname" and "phone" as user submit the form,so that i can display it in summary div.
Note: i have tried compact function of php in my controller so that i can send the whole database object in my view but this solution not working , after using compact function i was access the object like this
<input type="text" placeholder="John Smith" value="<?= (!empty($group_data)) ? $group_data->firstname : '';?>">
Any ideas regarding this ? i am new to laravel. I have served several hours on internet but nothing found out.
Assuming everything is on the same page, give your form's inputs an id:
<form id="form" method="post" action="{{url('/vpage')}}">
<label>First Name</label>
<input id="firstname" type="text" name="firstname" placeholder="First Name" value="{{$user->firstname}}" >
<label>Email Address</label>
<input id="email" type="text" name="email" placeholder="Email Address" value="{{$user->email}}" >
<label>Phone Number <span> (optional)</span></label>
<input id="phone" type="text" name="phone" placeholder="(888) 888-888" value="{{$user->phone}}" >
Give your summary div inputs an id too:
<p>SUMMARY</p>
<div class="sfieldz w100">
<label>Name:</label>
<input id="firstname2" type="text" placeholder="John Smith" value="{{$user->firstname}}">
</div>
<div class="w100">
<label>Email Address:</label>
<input id="email2" type="text" placeholder="johnsmith#gmail.com" value="{{$user->email}}" >
</div>
<div class="w100">
<label>Phone Number:</label>
<input id="phone2" type="text" placeholder="(888) 888-888" value="{{$user->phone}}">
</div>
Then, use jquery to get those values when the user submits the form:
$('#form').submit(function() {
// set our summary div inputs values with our form values
$('firstname2').val($('firstname').val());
$('email2').val($('email').val());
$('phone2').val($('phone').val());
});
That should be it.
Your view (I assumed that form and summery div in same view):
<form method="post" action="{{url('/vpage')}}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<label>First Name</label>
<input type="text" name="firstname" placeholder="First Name" value="{{$user->firstname}}">
<label>Email Address</label>
<input type="text" name="email" placeholder="Email Address" value="{{$user->email}}">
<label>Phone Number <span> (optional)</span></label>
<input type="text" name="phone" placeholder="(888) 888-888" value="{{$user->phone}}">
<button id="hitme" class="submitBTN getstart" type="submit" onclick='return false;'> Get Started</button>
</form>
#if($Data->input('firstname'))
<p>SUMMARY</p>
<div class="sfieldz w100">
<label>Name:</label>
<input id="firstname2" type="text" placeholder="John Smith" value="{{$Data->input('firstname')}}">
</div>
<div class="w100">
<label>Email Address:</label>
<input id="email2" type="text" placeholder="johnsmith#gmail.com" value="{{$Data->input('email')}}" >
</div>
<div class="w100">
<label>Phone Number:</label>
<input id="phone2" type="text" placeholder="(888) 888-888" value="{{$Data->input('phone')}}">
</div>
#endif
Contoroller
function vpageController(Request $r){
return view("path.to.view",['Data'=>$r]);
}
Route:
Route::Route::match(['POST', 'GET'],'/vpage', 'ControllerName#vpageController');