javascript blocks form from submitting - javascript

I'm using Django with bootstrap3 and using twitter's typeahead.js to get autocomplete on my form.
the form:
**
<div id="top" class="jumbotron">
<div class="container">
<h1 align="center">Home</h1>
<h3>
<form align="center" action="/search/" method="get" role="form">
<input id="navPersonSearch" type="text" name="q" placeholder="Search for Actor/Actress" autocomplete="off">
</form>
</h3>
</div> <!-- /.container -->
</div> <!-- /.jumbotron -->
**
script that handles autocomplete:
<script type="text/javascript">
$(document).ready(function() {
$("#navPersonSearch").typeahead({
name: 'people',
remote: 'name_autocomplete/?q=%QUERY'
});
});
</script>
This form doesn't have a submit button, so you submit it with enter. Commenting out the script allows the form to submit, but with the script it doesn't.

This may be due to typeahead modifying the keypress events; I'm not sure as I haven't worked with it. But reattaching the event might solve your problem.
try something like this :
$(document).ready(function() {
$("#navPersonSearch").typeahead({
name: 'people',
remote: 'name_autocomplete/?q=%QUERY'
}).keydown(function(e) {
if (e.keyCode === 13) {
$("form").trigger('submit');
}
});
});

Related

How to have multiple validations on injected ajax form using jQuery?

I would like to have a form (injected via ajax) that has multiple validations. Something like this:
<div data-form> <!-- Already on the page -->
<!-- Coming from API -->
<form>
<input type="number" data-input-decimal>
<input type="number" data-input-integer>
<input type="submit">
</form>
</div>
And this is my jQuery:
var $DATA_INPUT_DECIMAL = $('[data-input-decimal]');
var $DATA_INPUT_INTEGER = $('[data-input-integer]');
var $FORM = $('[data-form]');
$FORM.on('keydown', $DATA_INPUT_DECIMAL, function(e) {
console.log('banana');
// This is the validation for the input with decimal
}
$FORM.on('keydown', $DATA_INPUT_INTEGER, function(e) {
console.log('apple');
// This is the validation for the input with ONLY NUMBERS (0-9)
}
The weird part is when I test on the browser, both of these functions are being called when I keydown any of the inputs inside the form. How do I set up different validations properly in this situation?
Thanks in advance!
You need simple delegation:
$('[data-form]').on('keydown', 'input', function(e) {
if ($(this).is('[data-input-decimal]')) {
console.log('decimal');
} else if ($(this).is('[data-input-integer]')) {
console.log('integer');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div data-form>
<!-- Already on the page -->
<!-- Coming from API -->
<form>
<input type="number" data-input-decimal>
<input type="number" data-input-integer>
<input type="submit">
</form>
</div>

kendo automatic validation on form submit: how to attach to event

I am using Kendo DatePicker and other Kendo widgets in my forms.
By changing an input of those widgets to an invalid value,
the form is beeing prevented from submit.
It appears that there is some kind of automatic validation, that is beeing triggered before the form is beeing submitted.
How can I e.g. add an event to this validation?
I want to stop my button spinners when this happens.
I thought of attaching something like this:
onPreventInValidFormSubmit(){
Ladda.stopAll();
}
any ideas?
Update:
<div class="form-horizontal" style="margin-top: 20px; margin-bottom: 10px;">
<div class="form-group" style="margin-left: 0; margin-right: 0">
<div class="control-label col-sm-2 sl-internal-data">
#Html.LabelFor(m => m.CreatedAt)
</div>
<div class="col-sm-4">
#Html.Kendo().DateTimePickerFor(m => m.CreatedAt).Enable(true)
#Html.ValidationMessageFor(x => x.CreatedAt)
</div>
</div>
</div>
which is contained in Ajax.BeginForm with a submit button
You could attach to the validateInput event, like this:
<form>
<input name="username" required /> <br />
<button id="save">Save</button>
</form>
<script>
// attach a validator to the container
$("form").kendoValidator({
validateInput: function(e) {
if(!e.valid){
Ladda.stopAll();
}
}
});
</script>
There is also a validate event, which fires only when the form is submitted and not after each field is changed. You can read more about these in the events section of this documentation article: http://docs.telerik.com/kendo-ui/api/javascript/ui/validator#events-validateInput

Validating form using jQuery Form Validator on ajax post ()

I am using form validator plugin to validate my forms.
It is working properly if I am not submitting data using jQuery post method.
On using jQuery post it is not validating the form on submit.
My code is
<form action="UpdatedProfile" method="post" name="updateprofile" id="UpdatedProfile" class="form-horizontal">
<div class=" form-group ">
<div class="col-lg-2">
<label>First Name</label>
</div>
<div class="col-lg-4">
<input type="text" name="fname" cssClass="form-control" data-validation="required" data-validation-error-msg="First Name is required"/>
</div>
</div>
</form>
<script>
$(document).ready(function () {
$.validate();
$(document).on('click', '#submit', function (event) {
event.preventDefault();
console.log($('#UpdatedBasicProfile').serialize());
$.post("Updated", $('#UpdatedProfile').serialize(), function (data)
{....});
});
});
</script>
How to achieve this?
put a submit button in the form and define validation rule in js like
$('#frm_registration').validate({
rules:
{
fname: required
},
messages:
{
fname : 'Please enter name'
}
});
or if the button is of type button then initiate validation on its click like:
$('#btn').click(function(){
$('#frm_registration').valid(); // will initiate the validation
})
If the validator is working when clicked on submit button, you could trigger a click event on the button rather then listening the document for any clicks and if the target is the given button.

Cannot read property 'settings' of undefined when I click submit button

I don't know why I received this error when I changed the code to php (from html). when the extension of the file is html, the code is working fine.
<?php?>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/manual.css">
<!-- Optional theme -->
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<title>Register</title>
</head>
<body>
<nav class="navbar navbar-default" id="navBar">
</nav>
<div class="full">
<div class="col-xs-12">
<!--Side Bar-->
<div class="col-xs-3" id="navSide">
</div>
<div class="col-xs-6" id="signUpForm">
<h1>Register Page</h1>
<form role="form" id="signUpForm">
<div class="form-group">
<div class="form-inline spacer-12">
<input type="text" class="form-control" name="userFirstname" placeholder="First Name">
<input type="text" class="form-control" name="userLastName" placeholder="Last Name">
</div>
</div>
<div class="form-group ">
<input type="text" class="form-control"
name="userEmail"
placeholder="Email">
</div>
<div class="form-group ">
<input type="password" class="form-control" name="userPassword" placeholder="Password">
</div>
<div class="form-group ">
<input type="password" class="form-control" name="confirmPassword" placeholder="Password">
</div>
<div class="form-group ">
<label> Birthday* </label>
<input type="date" class="form-control" name="userBirthday" placeholder="Birthday">
</div>
<input type="submit" class="btn btn-info spacer-12" style="clear:both" >
</form>
</div>
</div>
</div>
<script src="js/startup.js"></script>
<script src="js/signup.js"></script>
</body>
</html>
<?php?>
then this is my jquery validation code
$(document).ready(function(){
$('#signUpForm').validate({
errorElement: "span",
errorClass: "help-block",
rules:{
userFirstName:{
required: true
},
userLastName:{
required: true
},
userEmail:{
required: true
},
userPassword:{
required: true
},
confirmPassword:{
required: true
},
userBirthday:{
required: true
}
},
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
return false; // for demo
},
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error').addClass('red-border');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error').addClass('has-success').removeClass('red-border');
}
});
});
This code causes error when I click the submit button (JQuery Validate Uncaught TypeError: Cannot read property 'settings' of undefined )
But the error is temporary and will vanish in a while.
You defined two ids with same name, whereas id should be unique.
<div class="col-xs-6" id="signUpForm">
<form role="form" id="signUpForm">
Try to remove id from <div class="col-xs-6" id="signUpForm">
If you use the rules() method, make sure to initialize the validation first.
var validator = $("#Form1").validate();
$('#field1').rules("add", {
min: 1
});
This error is normally caused by trying to validate an element that is not a form. In the OP's case, there are two elements with the same ID:
<div class="col-xs-6" id="signUpForm">
<form role="form" id="signUpForm">
jQuery searches a page from top to bottom, and the first element it finds with this ID is not a form.
The Validator.element() function (for validating single elements) can also cause this error, if attempting to validate an element that is outside the form.
NOTE two things
1. Define the Jquery function
include the function of jQuery !
(function( $ ) {
//Start Script
//endscript/
})( jQuery );
Change the Form Id because it's doing conflict between Form Id and Div Id
<form role="form" id="signUpForm1"> // include 1 in previous form id
And put this id into script
$('#signUpForm1').validate({ // put the Id in the script
Hope Your Task will be successful.
To add a small detail here, I ran into the same problem with jQuery UI time picker, and it also was due to the id being non-unique.
In my case, it's because I was grabbing the parent element from a template - duplicating it for a pop-up window. As a result, the contents of the window all had duplicate ids.
My normal workaround for that was to replace this:
$('#foo').bar();
with this:
myPopupWindow.find('#foo').bar();
That works quite well for most things, but not for the time picker. For that one, I wound up doing this:
myPopupWindow.find('#foo').attr('id', 'foo_' + someUniqueTag);
myPopupWindow.find('#foo_' + someUniqueTag).timepicker();
where someUniqueTag is a record id, random number or some other distinct string. This solved it quite nicely for me.

Form won't submit due to button's conflicting interests

My website has a simple form that is linked with MailChimp. The problem is that the form's submit button has conflicting interests, specifically, there's javascript email-field validation code that
is requiring the button to have type="submit" written in the button code. But if I include type=submit, it prevents my form from submitting to MailChimp.
Here is the button code in 2 forms. The first is the form which allows javascript error validation to work but submission to MailChimp to NOT work (notice the type)
<button class='buttonmain' type="submit" >Submit Form</button>
The second form does not have type="submit" and so js validation won't work, but it will submit to MailChimp:
<button class='buttonmain'>Submit Form</button>
Here's the full form
<form id="form-signup_v1"
name="form-signup_v1"
method="POST"
action="http://mysite.us10.list-manage.com/subscribe/post"
>
<!-- MailChimp Code -->
<input type="hidden" name="u" value="g02362223cdaf329adf5">
<input type="hidden" name="id" value="32da65235dba0">
<div class="errorstyle">
<div class="field">
<div class="ui left labeled input">
<input id="MERGE0"
name="MERGE0"
placeholder="My Email Address"
type="text"
data-validation="[EMAIL]">
<div class="ui corner label">
<i class="asterisk icon">*</i>
</div>
</div>
</div>
</div>
<button class='buttonmain' type="submit" >Submit</button>
</form>
and here's the script for validating the e-mail field.
Notice how it calls on "submit".
<script>
$('#form-signup_v1').validate({
submit: {
settings: {
inputContainer: '.field'
},
callback: {
onBeforeSubmit: function (node) {
myBeforeSubmitFunction(':D', ':)', node);
},
onSubmit: function (node) {
console.log('#' + node.id + ' has a submit override.');
//node.submit();
}
}
},
debug: true
});
function myBeforeSubmitFunction(a, b, node) {
console.log(a, b);
$(node).find('input:not([type="submit"]), select, textarea').attr('readonly', 'true');
$(node).append('<div class="ui active loader"></div>');
}
$('#prefill-signup_v1').on('click', function () {
var form = $(this).closest('form');
form.find('#signup_v1-name').val('John Doe');
form.find('#signup_v1-username').val('RocketJoe');
form.find('#signup_v1-password').val('test123');
form.find('#signup_v1-password-confirm').val('test123');
form.find('#signup_v1-email').val('test#test.test');
form.find('#signup_v1-email-confirm').val('test#test.test');
});
</script>
How do I combine the 2 button code forms I posted at the beginning, so that the form IS validated with js and also submits to MC?
Thanks so much!
I solved it myself doing the following:
Changing the script to include:
function myBeforeSubmitFunction(a, b, node) {
document.getElementById("form-signup_v1").submit();

Categories

Resources