I have used below code for bootstrap textbox and textarea and also in the last div I have used button type="reset" .But when I entered invalid shop name and valid Address and click on Reset button it reset it and after only entering invalid shop name and click on Add shop then it is successfully adding new shop.Both the textbox show green background-color and correct sign even after it is empty.
Please help me.
Please see below image after onclick of reset button:
<form id="defaultForm" method="post" class="form-horizontal"
data-bv-message="This value is not valid"
data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">
<div class="form-group">
<label class="col-xs-3 control-label">Shop Name</label>
<div class="col-xs-4">
<input type="text" class="form-control" pattern="^[a-zA-Z\s]+$"
data-bv-regexp-message="The shop name can consist of alphabetical characters only" name="shopName" placeholder="Shop Name" data-bv-trigger="blur" data-bv-notempty="true" data-bv-notempty-message="Shop name is required and cannot be empty" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Shop Address</label>
<div class="col-xs-4">
<textarea id="id_txt_addr" type="text" class="form-control" name="shop_address" placeholder="Shop Address" style="height:100px" maxlength="200" data-bv-trigger="blur" data-bv-notempty="true" data-bv-notempty-message="Shop address is required and cannot be empty"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<input type="submit" name="add" class="btn btn-primary" value="Add Shop">
<button type="reset" class="btn btn-default">Reset</button>
</div>
</div>
</form>
On reset button click, remove all relevant validation classes and elements handling error message inside closest form. Here an example:
$(':reset').on('click', function(){
var $form = $(this).closest("form");
$form.find('*').removeClass('has-success has-error glyphicon-ok glyphicon-remove');
$form.find('.help-block').remove();
});
-DEMO-
Now maybe there is a bootstrap method to reset validation, you should check bootstrap DOC maybe.
$(document).ready(function () {
$("#ibtReset").on("click", function () {
$('#ShopName').val("");
$('#id_txt_addr').val("");
$('.glyphicon ').remove();
});
});
On reset button click both the values become empty.
It may help You.
Related
I am using Laravel 7. Here I am using a dynamic form there clicking on "Add More" I can add same type of input fields. I want to add a remove button beside the new row to remove the new row which is add by click on "Add More" button. Also Clicking on "Submit" Button I want to send the data to controller to store it in DataBase.
My blade part:
<div class="card-body">
<div class="div-repeat-notification" style="display: none;">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="">Name :</label>
<input type="text" name="cn_name[]" value="" class="form-control" placeholder="Name"/>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Email :</label>
<input type="text" name="cn_email[]" value="" class="form-control" placeholder="Email"/>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Phone :</label>
<input type="text" name="cn_phone[]" value="" class="form-control" placeholder="Phone"/>
</div>
</div>
</div>
</div>
<a style="float:right;color:#fff;" class="div-repeat-notification_add_more btn btn-rounded btn-danger btn-sm" onclick="addMore('.div-repeat-notification')">Add More</a>
</div>
my js part:
$(document).ready(function(){
$('.div-repeat-notification_add_more').before($('.div-repeat-notification').html());
})
function addMore(vr){
var html = $(vr).html();
//$(vr+'_add_more').before(html);
$(vr+'_add_more').before('<div class="div-repeat-notification">'+html+'</div>');
}
this is adding row dynamically. I want a remove button beside new row . and submit button to send data to the controller. Note: I am not using any model.
I have two inline radio button in a form using Bootstrap. But when I validate it then the message showing inside of first radio button instead of showing after second radio button. I would like to show that radio button message like Email and password. Here is the screenshot of my form.
Without Validation:
With Validation:
HTML Form:
<form name="registration" action="">
<div class="signingInner">
<h4 style="font-weight: 500; text-align:center; font-size: 20px ">Sign in to your Account</h4>
<div class="form-group">
<label for="emailId">Email Address:</label>
<input type="text" class="form-control" id="login_email" name="login_email" placeholder="Please enter Email address">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" name="login_password" id="login_password" placeholder="●●●●●●">
</div>
<div class="form-group">
<div class="radio-inline" style="padding-left: 100px;">
<input type="radio" id="user" name="LoginMode" value="user" >
As <strong>User</strong> </>
</div>
<div class="radio-inline" style="padding-left: 30px;">
<input type="radio" id="company" name="LoginMode" value="company" >
As <strong>Company</strong></>
</div>
</div>
<input type="submit" name="btnLogin" class="btn btn-lg btn-primary btn-block" value="Login"></input>
</div>
</form>
Plunker Link:
https://plnkr.co/edit/0vpvU9QbRu8Mlwbi04ti?p=preview
The trick is to use errorPlacement callback function.
So I am checking whether the rendered type is radio button then I am tracking the appropriate topmost parent div and inserting the message after that.
errorPlacement: function(error, element) {
if ( element.is(":radio") ) {
error.insertAfter( element.parent().parent().parent().parent());
}
else { // This is the default behavior of the script for all fields
error.insertAfter( element );
}
},
See the updated plunkr here.
And the output looks like
EDIT:
I have finally updated the original plunkr provided by you.
I'm trying to submit a form with jquery, but it does not acknowledge that I submitted it when I click the "submit" button.
My html is as follows:
<form id="singleParam" role="form">
<div class="form-group">
<label for="sample_size">Number of samples needed</label>
<input name="choices[sample_size]" type="number" class="form-control" id="sample_size" placeholder="Enter desired number of samples">
</div>
<div class="form-group">
<label for="mode">Mode of the distribution (value most likely to be sampled)</label>
<input name="choices[mode]" type="number" class="form-control" id="mode" placeholder="Enter the likeliest value for your parameter">
</div>
<div class="form-group">
<label for="confidence">Confidence interval factor</label>
<input name="choices[confidence]" type="number" class="form-control" id="confidence" placeholder="Enter desired confidence interval factor">
</div>
<div class="form-group">
<input type="button" class="btn btn-primary btn-lg" id="submit" name="submit">
</div>
</form>
and JS is:
$('#singleParam').on('submit', function () {
alert('Form submitted!');
console.log('Form submitted!');
return false;
});
The alert() or console.log() in the loop do not work, meaning that jquery did not run the code on submit. What am I doing wrong? It might be worth mentioning that I am using bootstrap.
Change the button type from type="button" to type="submit"
EDIT:-
Make sure you are calling all your event handlers once the DOM is fully loaded by adding all the code inside dom ready event like:-
$(document).ready(function() {
// code here
});
I am using this JS validate plugin and it is working, but it will intercept all button clicks in the page and is trying to validate the form even I click Back to Home.
I only want the form to validate when I click the login button, when I click the Back to Home button I do not need to validate the form, just submit and redirect to the home page.
The reason I am still submitting the form on the Back to Home click event is because I need to capture the email address for use in my Controller.
How can I only capture the click events of the Login and Back to Home buttons?
Is it possible to stop the form from being validated when I click the Back to Home button?
HTML & JS Code:
<form data-toggle="validator" role="form">
<div class="form-group">
<label for="inputEmail" class="control-label">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label">Password</label>
<div class="form-group col-sm-6">
<input type="password" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required>
<span class="help-block">Minimum of 6 characters</span>
</div>
<div class="form-group col-sm-6">
<input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Whoops, these don't match" placeholder="Confirm" required>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary" data-action="login">Login</button>
<button type="button" class="btn btn-danger" data-action="backtohome" >Back To Home</button>
</div>
</form>
<script src="http://127.0.0.1/js/validator.min.js"></script>
<script type="text/javascript">
$('.btn').on('click', function(event) {
event.preventDefault();
var action = $(this).data('action');
if (action !== "nil")
{
$('#action').val(action);
var form = $("form");
form.submit();
}
});
</script>
The reason this is happening is because your binding the click events of any button with the class of .btn.
To avoid this you can bind the click events of only the buttons you need by adding an id to the form-group that contains your login and back to home buttons.
<div id='form-actions' class="form-group">
<button type="button" class="btn btn-primary" data-action="login">Login</button>
<button type="button" class="btn btn-danger" data-action="backtohome" >Back To Home</button>
</div>
Modify your jQuery to only capture the #form-actions button click events
$('#form-actions button').on('click', function(event) {
event.preventDefault();
var action = $(this).data('action'),
form = $("form");
if (action == 'backtohome') {
$('form').validator('destroy');
}
if (action !== "nil") {
$('#action').val(action);
}
form.submit();
});
I'm new to JavaScript/jQuery so could do with some assistance here. I have the following inputs in a form:
<div class="form-group">
<button type="button" class="btn btn-default navbar-btn" data-toggle="button tooltip"
data-placement="right" title="Use your exact location" name="geoloc" id="geoloc">
<li class="icon-screenshot"></li>
</button>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Address" name="address"
id="address">
<input name="lat" type="hidden" value="">
<input name="lng" type="hidden" value="">
</div>
I'm trying to disable the address input text box if the user clicks the geoloc toggle button (which means the form will use their exact location) as the text box becomes redundant.
How do I get the browser to apply the 'disabled' attribute to the address input when the geoloc input class is active, and enable the address input when the geoloc button doesn't have the active class?
A basic approach to toggling your address field's disabled property:
$('#geoloc').click(function (e) {
var $address = $('#address');
$address.prop("disabled", !$address.is(':disabled'));
});