I have developed some forms using Eleventy and I never had any issues with the credentials appending themselves to URL, but now I have made a new password authentication form and this one is appending the password to the url and I am unclear as to why.
This is the Eleventy form:
module.exports = function() {
return `
<form class="rds-form">
<div>
<input
type="password"
id="input_password"
name="Password"
aria-required="true"
class="form-control to-switch"
maxlength="32"
data-required-message="A password is required to login. Please add it now"
/ >
</div>
<div class="pull-right">
<button
type="submit"
class="btn btn-primary btn-lg submit-btn"
id="custom-password"
>
Login
</button>
</div>
</form>
`
}
the logic for it:
document.querySelector('.rds-form').addEventListener('submit', function () {
alert('form submitted!');
});
The form default method is GET so set the method attribute to POST.
<form class="rds-form" method="post">
So apparently the API I am working with from a third party vendor does an AJAX call, so I had to add e.preventDefault() to prevent the default browser behavior like so:
document.querySelector('.rds-form').addEventListener('submit', function (e) {
e.preventDefault();
alert('form submitted!');
});
Related
This question already has answers here:
Using JQuery - preventing form from submitting
(15 answers)
Closed 5 years ago.
I am trying to get my form to stop refreshing on submit and instead I would like to make an ajax call, I haven't done the ajax part yet but its still refreshing?
What have you tried?
I have took suggestions on the forum and added 'return false;' after the function is called onSubmit?
$('#message_form').submit(function() {
postMessage();
return false;
});
function postMessage() {
var isValid = true;
var username = document.forms["post_message_form"]["username"].value;
var message = document.forms["post_message_form"]["message"].value;
var errorMessage = "Something went wrong, try again!";
if (isEmpty(username) || isEmpty(message)) {
errorMessage = "You can't post with an empty name or message.";
isValid = false;
}
if (!isValid) {
alert(errorMessage);
}
else {
alert("Your message has been posted.");
}
return false;
}
function isEmpty(field) {
return field == null || field == "";
}
Form:
<form id="message_form" name="post_message_form" method="post">
<input type="text" class="form-control" placeholder="Whats your name?" name="username">
<textarea class="form-control" placeholder="Whats your message?" name="message"></textarea>
<input type="submit" class="btn btn-info" name="message_form" value="Submit Message">
</form>
Try this:
<form id="message_form" name="post_message_form" method="post" onsubmit="return postMessage();">
<input type="text" class="form-control" placeholder="Whats your name?" name="username">
<textarea class="form-control" placeholder="Whats your message?" name="message"></textarea>
<input type="submit" class="btn btn-info" name="message_form" value="Submit Message">
</form>
Try this code added onsubmit="return postMessage()
<form id="message_form" name="post_message_form" method="post" onsubmit="return postMessage()">
<input type="text" class="form-control" placeholder="Whats your name?" name="username">
<textarea class="form-control" placeholder="Whats your message?" name="message"></textarea>
<input type="submit" class="btn btn-info" name="message_form" value="Submit Message">
</form>
EDIT: Updated
There can be certain reasons regarding this kind of issue
postMessage is not accessible
There may be chances that this message is not globally declared
There may be other error in javascript code
Some some piece of code does not work due to error in other parts of javascript code
There may be chances that you have not loaded jquery core library file
If have not include jquery.min.js file your above code will not work (your case - See comments)
Since return false and event.preventDefault(); do the same work in this example you can use one of them
$('#message_form').submit(function(event) {
event.preventDefault();
postMessage();
// return false;
});
To debug the code and find the error you can open developer tools in browser by pressing f12 or select option inspect element by clicking right click on the page
use preventDefault instead return false;
$('#message_form').submit(function(event) {
console.log(123);
event.preventDefault();
});
https://codepen.io/animhotep/pen/bRBmxm?editors=1011
like in official maual ;) https://api.jquery.com/submit/
I am looking for a way to check, if the url a user have posted in my form is a valid facebook url. I am aware of the regx (?:(?:http|https):\/\/)?(?:www.)?facebook.com\/(?:(?:\w)*#!\/)?(?:pages\/)?(?:[?\w\-]*\/)?(?:profile.php\?id=(?=\d.*))?([\w\-]*)?
But how to use it, am i not sure on how to do?
<div class="col-sm-6">
<div class="col-sm-12">
<b>Facebook Url</b>
<input id="FacebookUrl" name="FacebookUrl" type="text" class="form-control" />
</div>
<div class="col-sm-12">
<button id="SendBtn" class="btn btn-success pull-right">Send</button>
</div>
</div>
How can i make a form validation on that, that checks the facebook regx? Thanks
In the button onclick event:
<button id="SendBtn" class="btn btn-success pull-right" onclick="return validateUrl();">Send</button>
And then you can open a script tag in the same file or other file and implement your regex.
function validateUrl() {
url = $("#FacebookUrl").val();
var pattern = /^(?:(?:http|https):\/\/)?(?:www.)?facebook.com\/(?:(?:\w)*#!\/)?(?:pages\/)?(?:[?\w\-]*\/)?(?:profile.php\?id=(?=\d.*))?([\w\-]*)?$/;
if(pattern.test(url)) {
alert("Correct URL");
}
else {
alert("Incorrect URL");
}
return pattern.test(url);
}
And with this result prevent the action.
If you have a <form> and a <button type='submit'> and you click on the submit button, it will do the default form validation, such as checking whether an <input> is required or not. It would normally say Please fill out this field.
However, if I programmatically submit the form through $("form").submit() for example, it would submit it without performing any checks.
Is there a simpler way to perform the default form validations using native JavaScript? There seems to be only checkValidity() on the form element which return true or false. And if I call the same native function on the input itself, it doesn't really do anything.
Here is a demo code of what I mean:
http://jsfiddle.net/totszwai/yb7arnda/
For those still struggling:
You can use the Constraint validation API - https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation
<div id="app">
<form>
<input type="text" required placeholder="name">
<input type="text" required placeholder="email">
</form>
<button id="save">Submit</button>
</div>
const form = document.querySelector("form");
document.getElementById("save").addEventListener("click", e => {
e.preventDefault();
if (form.checkValidity()) {
console.log("submit ...");
} else {
form.reportValidity();
}
});
Check out and play here: https://stackblitz.com/edit/js-t1vhdn?file=index.js
I hope it helps or gives you ideas. :)
I think this might be the answer you are looking for :
JavaScript :
document
.getElementById('button')
.addEventListener("click",function(e) {
document.getElementById('myForm').validate();
});
HTML :
<form id="myForm" >
First name: <input type="text" name="FirstName" required><br>
Last name: <input type="text" name="LastName" required><br>
<button id="button">Trigger Form Submit</button>
</form>
Demo : http://jsfiddle.net/2ahLcd4d/2/
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();
I have a form that I wanted be nested, but it is not possible since HTML can't accept nested form. Is there a way I can manually invoke the submit(triggers the validation, e.g. required) on first form on AngularJS?
Here's how the code looks like:
<div ng-conroller="ContactController">
<form ng-submit="saveHeaderAndDetail()">
<label for="Description">Description</label>
<input type="text" ng-model="Description" required/>
<input type="text" style="visibility:hidden" />
</form>
<form ng-submit="addToDetail()">
...
</form>
<input type="button"
ng-click="what code could trigger the first form's submit?"/>
</div>
Btw, both forms are under one controller if that helps
Try creating a directive that catches an event:
var app = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.triggerSubmit = function() {
$scope.$broadcast('myEvent');
console.log('broad');
};
$scope.onSubmitted = function() {
alert('submitted!');
};
}
app.directive('submitOn', function() {
return {
link: function(scope, elm, attrs) {
scope.$on(attrs.submitOn, function() {
//We can't trigger submit immediately, or we get $digest already in progress error :-[ (because ng-submit does an $apply of its own)
setTimeout(function() {
elm.trigger('submit');
});
});
}
};
});
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-controller="MyCtrl">
<form submit-on="myEvent" ng-submit="onSubmitted()">
Form...
</form>
<hr />
<a class="btn" ng-click="triggerSubmit()">Submit</a>
</div>
Original source:
http://jsfiddle.net/unWF3/
I've answered a similar question here AngularJS - How to trigger submit in a nested form
Basically, you can trigger validation by firing $validate event
isFormValid = function($scope, ngForm) {
$scope.$broadcast('$validate');
if(! ngForm.$invalid) {
return true;
}
For working code example & a small utility method which is helpful in showing validation messages, see answer in the above link.
You can have nested forms with ng-form directive. It will be like:
<form name="accountForm">
<div data-ng-form="detailsForm">
<input required name="name" data-ng-model="name">
</div>
<div data-ng-form="contactsForm">
<input required name="address" data-ng-model="address">
</div>
<button type="submit">Save</button>
</form>
That way when submit will be triggered for the accountForm it will validate nested ng-forms also.
There's an easier way to do that, You can give a name for each form that you have in your app, then you'll be able to send the entire angular object of the form that you want to trigger or do whatever you want with it. Example:
<div ng-conroller="ContactController">
<form name="myFirstForm" ng-submit="saveHeaderAndDetail()">
<label for="Description">Description</label>
<input type="text" ng-model="Description" required/>
<input type="text" style="visibility:hidden" />
</form>
<form name="mySecondForm" ng-submit="addToDetail()">
...
</form>
<input type="button"
ng-click="saveHeaderAndDetail(myFirstForm)"/>
</div>
Then in your function
saveHeaderAndDetail (myFirstForm) {
myFirstForm.$submitted = true
...
}
We can always submit a form directly using the submit
() function from javascript.
document.getElementById("myform").submit()
In this way, we can validate the form using angularjs first and if the form is valid then submit it using the submit method.