Develop Reference

Where can I find onSubmit form field check using Firefox DevTools?

I integrated the Google reCaptcha into a website form. Before, on form submit the webapp checked if all form filed were filled in. After I integrated the reCaptcha, this form check does not run anymore and the form ist send even when the fields are empty.
I tried to find the javascript that does the checks but could not find it. I ran the Firefox DevTools Runtime Analysis and checked the Flame Chart to see the javascript call stack. There I found some jquery functions but afaik that can not be the whole story, as form field checks are not done by jQuery.
By what menas can I find out, what javascript function is called to do the check? Or could the checks be done elsewhere, e.g. in CSS.
Strange too: The posted error message "Please fill in this field" can not be found anywhere in the entire project code. I checked in my IDE.
The Webpage uses twitter Bootstrap, jQuery 1.12.4 and runs on Silverstripe CMS 3.6 with userforms module (although this particular form appears in the correseponding page template).
I appreciate any hint. I allready spent hours with this issue.

I had 2 problems there:
- first: I had a submit button with id="submit" as in Google reCaptcha documentation example (https://developers.google.com/recaptcha/docs/invisible). However, this can cause "confusing failures" if used with jQuery (http://api.jquery.com/submit/). So I renamed the button id="submit_button" and the form was submitted.
- second: Form validation was done by HTML5 which I did not know exists.This was activated with the "required" attributes is the input form fields. Shame on me!
My form now works and looks like this:
<h2>Anfrage</h2>
<form action="formaction.php" method="post" id="form-offer" class="form-std form-offer" enctype="multipart/form-data" >
<fieldset>
<label>Firma * <input name="firma" required="" type="text"></label>
<select name="anrede" required="">
<option value="">Anrede *</option>
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
<label>Name und Vorname Kontaktperson *<input name="vorname" required="" type="text"></label>
<label>PLZ & Ort *<input name="ort" required="" type="text"></label>
<label>Adresse *<input name="adresse" required="" type="text"></label>
<select name="land" required="">
<option value="">Land *</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Ägypten">Ägypten</option>
<option value="Aland">Aland</option>
<option value="Albanien">Albanien</option>
</select>
<label>E-Mail *<input name="email" required="" type="email"></label>
<label>Telefon *<input name="telephone" required="" type="text"></label>
</fieldset>
<div class="g-recaptcha"
data-sitekey="sdfsdfsdfsdfsdf"
data-size="invisible"
data-callback="formSubmit">
</div>
<button id="submit_button">Send<i class="icon icon-chevron-right"></i></button>
<input name="block" value="167" type="hidden">
<input name="locale" value="de_DE" type="hidden">
</form>
<link rel="stylesheet" type="text/css" href="body.min.css">
<script src="jquery-12.js"></script>
<script defer="" src="main.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
(function($, document, undefined){
$('#form-offer').submit(function (event) {
event.preventDefault();
grecaptcha.reset();
grecaptcha.execute();
});
})(jQuery, document, undefined);
function formSubmit(response) {
// submit the form which now includes a g-recaptcha-response input
var myForm = document.getElementById("form-offer");
myForm.submit();
}
</script>

How to reset HTML5 form validation errors when click back button

Im having an issue clearing the HTML5 oninvalid red border around inputs. If a user clicks the submit button without correctly filling out the form, the HTML5 setCustomValidity errors will show and the default red outline will appear around any required input fields that were left blank...this all works great. Problem is, if a user clicks the back button, then comes back to this form or another section of the form within this form, the form will still display all invalid form elements with the red outline.
What i would like to happen, is if this forms "go back" button is clicked, that will reset/clear the form so that all form elements are reset and none will display the red outline unless the form was once again submitted and has empty/incorrect form information.
Here is a snippet of my code:
<form class="login-form" aria-label="Login" action="" method="post">
<div class="login-A">
<h4>Are you a client?</h4>
<div>
<button class="lx-button lx-button--small lx-button--primary" id="client-yes" type=button>
Yes
</button>
<button class="lx-button lx-button--small lx-button--primary" id="client-no" type=button>
No
</button>
</div>
</div>
<div class="login-B">
<h4>Existing client information</h4>
<button class="lx-button lx-button--small lx-button--tertiary back" id="olb-back-btn-2" type=button>
Go back
</button>
<p>Enter your online ID and Password</p>
<div>
<div>
<label for="olb-user-id">User ID</label>
<input id="olb-user-id" name="olbuserid" maxlength="20" type="text" required="required" oninvalid="setCustomValidity('User ID is required.')" oninput="setCustomValidity('')">
</div>
<div>
<label for="olb-password">Password</label>
<input id="olb-password" name="olbpassword" maxlength="28" value="" type="password" required="required" oninvalid="setCustomValidity('Password is required.')" oninput="setCustomValidity('')">
</div>
</div>
<button class="lx-button lx-button--small lx-button--primary" id="login-button" type=submit>
Continue
</button>
</div><!-- login-B -->
<div class="login-C">
<h4 class="text">New client</h4>
<button class="lx-button lx-button--small lx-button--tertiary back" id="olb-back-btn-3" type=button>
Go back
</button>
<label for="login-state">Select your state to view your account options.</label>
<div class="login-state-container">
<select id="login-state" name="login-state" required="required" oninvalid="setCustomValidity('State is required.')" oninput="setCustomValidity('')">
<option value="" selected="selected">State</option>
<option value="AL">AL</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="IN">IN</option>
<option value="WV">WV</option>
<option value="DC">Washington, DC</option>
</select>
</div>
</div>
</form>
Ive searched for days trying to figure out how to solve this issue. I have tried:
function clearValidity(){
document.getElementById('olb-user-id').setCustomValidity('');
document.getElementById('olb-password').setCustomValidity('');
document.getElementById('login-state').setCustomValidity('');
}
document.getElementById( 'olb-back-btn-2' ).onclick = function() {clearValidity()};
document.getElementById( 'olb-back-btn-3' ).onclick = function() {clearValidity()};
also tried:
$('.login-form').trigger("reset");
Along with many other trials from posts i have read but nothing seems to work. Please help! Thank you!

The back button is a save of how the last page ended. The only way to do this, is to change the form to post the data using Javascript.
Use javascript collect the data and HttpXML to post it
First collect the data with JavaScript
Then clear all the fields using javascript
Post the data using javascript a HttpXML request
Upon return (xml repsonse) Redirect if required or show an error for them to re complete the form (the form will now be blank and ready to start again)
If using this method be sure to disable the submit button until the response has been returned from the XML post to stop the user submitting multiple times

Redirecting after form submission in Javascript

I hope someone can assist with this. I dont have access to the website backend, so I cant change the js script uploaded there. What I am trying to achieve is make a simple form to submit an issue report and then display a "Thank you" popup and redirect back to main page of the account on our page.
So I can make a form no problem. I copied one of the functioning forms by going to Edit link and clicking on Show Source in Page Body. But I can't stop the default behavior of it going to another page after Submit button is pressed. I suspect it is in js script on the back end. I'll copy code below.
<center>
<b>App Issues Report Form</b>
<br>
</center>
<form action="/Modules/SendForm" method="post" class="form" id="NewForm">
<input name="formFields" value="CONTACTID,AgentName,Notes" type="hidden">
<input name="formLabels" value="Contact ID:,Agent Name:,Notes:" type="hidden">
<input name="fromAddress" value="no-reply#callcenter.com" type="hidden">
<input name="toAddress" value="name#CallCenter.com" type="hidden">
<input name="subject" value="A new message about app" type="hidden">
<input name="emailMsg" value="The following data has been collected:" type="hidden">
<input name="CONTACTID" value="##CONTACTID##" type="hidden">
<input name="companyId" value="##COMPANY_ID##" type="hidden">
<div class="clearfix">
<label>Agent Name:</label>
<div class="input"><input id="AgentName" name="AgentName"
class="validate[required] xlarge" value="##LOGGEDIN_AGENT_FIRST_NAME##
##LOGGEDIN_AGENT_LAST_NAME##" type="text">
</div>
</div>
<div class="clearfix">
<label>Notes:</label>
<div class="input"><textarea id="Notes" name="Notes"
class="validate[required] xxlarge"></textarea>
</div>
</div>
<div class="clearfix grey-highlight">
<div class="input no-label">
<input class="button blue" value="Submit" type="submit">
<input class="button grey" value="Reset" type="reset">
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("NewForm").click(function( event ) {
alert( "Thank you for your feedback" );
event.preventDefault();
});
});
</script>
It used to have only this at the end when I copied the code:
<script type="text/javascript">
$(document).ready(function () {
new setupAjaxForm('NewForm'); });
</script>
I tried searching and suggestions here didnt seem to work:
How to redirect user to another page after Ajax form submission
How to redirect user to another page after Ajax form submission?
http://learn.jquery.com/about-jquery/how-jquery-works/

The first thing you have to look at is action="/Modules/SendForm" - this is what does the redirection. If you don't want to redirect, set this to the name of the page you have the form. Obviously there is a whole lot more to forms and redirection (and some other js code might influence this too, nonetheless we don't see what the function setupAjaxForm is supposed to do here), but this is really the first thing to check / get right.
EDIT: I think I understand it more now: basically if you don't have access to the /Modules/SendForm page (where most probably, among others, like form validation, the redirection also happens, then you can't do much to change the redirection.

How to get null values in textboxes in JQuery?

Actually I am having one registration form & one settings page. After entering some values in registration form when i change my page to settings page & if I come back to registration page I want all those values entered previously needs to be empty, but they are displayed as per the values entered by me.
The following code shows the full description of my code:
index.html
<section id="main" data-role="page">
<div data-role="content" class="mainScreen">
Register
Settings
</div>
<section id="Registration" data-role="page">
<div class = "registrationScreen">
Name <input type="text" id="name" name="name"> </input>
Age <input type="number" id="age" name="age"></input>
Mobile Number <input type="number" id="mobile" name="mobile"> </input>
Email Id <input type="email" id="email" name="email"> </input>
<input type="submit" id="register" name="register" value="Register"> </input>
</div>
</section>
<section id="settings" data-role="page">
<div data-role="content">
<p>.....</p>
</div>
</section>
As per the following code after entering some values in registration form when I change my page to settings page & if I come back to registration form all the values need to be empty. Can anyone please help me with this...
Waiting for your reply...

$(document).ready(function() {
$("input[type='text']").val(''); //sets blank to all textboxes of type input
});
Or if you want inputs of specific divs to be cleared then:
$(".registrationScreen :input:not(input[type='submit'])") { //except for submit
$(this).val('');
});

The following jQuery will clear all form elements that are children of the class registrationScreen:
$(".registrationScreen").children().each(function() {
$(this).val("");
});

where is the validation coming from on this file?

I have this link and if you click submit without filling any of the fields you get three validations but i have no js files included so where is this coming from
Here is the all the HTML
<div class="content">
<div class="page row nobor">
<div class="three_col wide row">
<div class="title">
</div>
<div class="column">
<h2>email sign up</h2>
<div class="inner">
<form method="post" action="/signup_complete" id="signup_form">
<p>
stuff
</p>
<p class="row">
<label>First Name <span class="req">*</span></label>
<input type="text" id="first_name" name="first_name" required="true">
</p>
<p class="row">
<label>Last Name <span class="req">*</span></label>
<input type="text" id="last_name" name="last_name" required="true">
</p>
<p class="row">
<label>Email <span class="req">*</span></label>
<input type="text" message="Please provide your email address." required="true" value="" name="email">
</p>
<p class="row nopad nomarg"><input type="submit" value="submit" class="sub_fbut submit" name="submit"></p>
<div class="clear"></div>
</form>
</div>
</div>
</div>
</div>
Basically I need to add more validation to not allow less then 3 letters but i have no idea where this is coming from and how do i alter...ideas?

This is coming from the HTML5 browser capabilities. Meaning this validation only works on modern browsers that support validation attributes such as "required", check out some examples here.
If you want browser compliant validation i suggest this plug in. Just remember people can disable JS so if you have sensitive data validate it server-side.

Remove the required="true" from your <input> tags to get rid of that validation.

if you click submit without filling any of the fields you get three
validations but i have no js files included so where is this coming
from
It looks like you are using HTML5 forms code here.
It uses required="true" or required
HTML5 browsers are interpreting this correctly.
Read more: http://diveintohtml5.ep.io/forms.html#required
Basically I need to add more validation to not allow less then 3
letters but i have no idea where this is coming from and how do i
alter
If you need some simple validation, you could do something like this
$('#first_name').blur(function(){
if($(this).val().length < '3'){
alert('You must enter three characters');
}
});
Example: http://jsfiddle.net/jasongennaro/ZEjEq/
This is just an example. You could do something like this on submit().
Also, you should validate content on the server side, too. Just to be sure!