We Keep Coding

How to write a js script that verifies input on html

I am trying to add validation to a html form that looks like this:
<div id="container">
<header>
<h1>Production Form</h1>
</header>
</br>
<div class="content">
<div class="row">
<article class="col-xs-12">
<form id="cf-task-form">
<section>
<br><br>
<div class="row form-group">
<div class="col-xs-3">
<label for="link">Link</label>
<input type="url" id="link" class="form-control" name="output[link]">
</div>
<div class="col-xs-3">
<label for="address">Address</label>
<input id="address" class="form-control" name="output[address]">
</div>
<div class="col-xs-3">
<label for="research">Research</label>
<select id="research" name="output[research]">
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
</section>
<div class="col-xs-offset-6 col-xs-6">
<input type="button" class="btn sub-btn pull-right" id="submit-btn" value="Submit" tabindex="10">
</div>
</form>
</article>
</div>
<div class="clear"></div>
</div>
</div>
However the code is not picking validation when I use the required attribute, how can I add validation for this within a js script that will check against the values in this html form before submitting

I think maybe you get the errors because the HTML tags were not opened and closed in the correct order, and you had an opened div that needed to be closed. Try validating the HTML code. I think it can cause problems if your html is not valid.
I added these attributes to your HTML (and validated it), and also some CSS to see the validation result.
<input type="text" id="link" class="form-control" name="output[link]" required="true" pattern="^http.*">
<input id="address" class="form-control" name="output[address]" required="true" pattern=".*street.*">
and
:invalid {
border: 1px solid red;
}
This works and validates as expected.
:invalid {
border: 1px solid red;
}
input {
margin: 1em
}
<div id="container">
<header>
<h1>Production Form</h1>
</header>
<div class="content">
<div class="row">
<article class="col-xs-12">
<form id="cf-task-form">
<section>
<div class="row form-group">
<div class="col-xs-3">
<label for="link">Link</label>
<input type="text" id="link" class="form-control" name="output[link]" required="true" pattern="^http.*">
</div>
<div class="col-xs-3">
<label for="address">Address</label>
<input id="address" class="form-control" name="output[address]" required="true" pattern=".*street.*">
</div>
<div class="col-xs-3">
<label for="research">Research</label>
<select id="research" name="output[research]">
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
<div class="col-xs-offset-6 col-xs-6">
<input type="button" class="btn sub-btn pull-right" id="submit-btn" value="Submit" tabindex="10">
</div>
</div>
</section>
</form>
</article>
</div>
<div class="clear"></div>
</div>
</div>
Note that the validation patterns are only for testing and not real patterns that should be used!
I used this page as reference: https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

If you want the required attribute to work, I think you need to change your last input type to "submit" :
<input type="submit" class="btn sub-btn pull-right" id="submit-btn" value="Submit" tabindex="10">
But I agree that it would be great to add some JS if you want to do proper form validation. I see some people shared useful links on the subject.

<form id="cf-task-form" onsubmit="return validateForm()">
const link = document.querySelector("#link").value
const Address = document.querySelector("#Address").value
const research = document.querySelector("#research").value
function validateForm() {
if (link == '') {
alert("filled out url");
return false;
}
else if (Address == '') {
alert("filled out Address");
return false;
}
else if (research == '') {
alert("filled out research");
return false;
}
}

Braintree 'payment_method_nonce' returns empty

I'm fairly new to Braintree. Im integrating the DropIn UI in the Sandbox environment. The 'payment_method_nonce' is returning empty after I submit my form, which makes the transaction fail. The DropIn UI displays correctly in the specific div, and to make sure everything was working correctly I added in a place holder for the PaymentMethodNonce which was 'fake-valid-nonce', which made the transaction valid. I am stuck on why the Braintree server is not sending back a Nonce value.
I make an Ajax call to token.php to get the Client Token which enables the DropIn UI to render correctly.
Ajax call below:
<script>
$.ajax({
url: "/braintree/token.php",
type: "get",
dataType: "json",
success: function (data) {
braintree.setup(data, 'dropin', {container: 'dropin-container'});
);
</script>
This is token.php which generates the Client Token:
require ("braintree.php");
$clientToken = $gateway->clientToken()->generate();
echo json_encode($clientToken);
When I inspect the HTML, BrainTree shows a 'server-error-message' div, and it displays "There was an error processing your request. Try again." Other posts regarding this issue have mentioned that the way a HTML form can be set up and submitted can cause this issue.
Here is my Form:
<div class="container">
<div class="row flex-nowrap">
<div class="alpha-container col-12">
<div class="content-container">
<form id="infoForm" method="post" action="/congrats.php">
<div class="tab">
<h2>Pick a Time</h2>
<div>
<!-- Google Schedule API goes here -->
</div>
<div>
<h4>Distance:</h4>
<p></p>
<br>
<h4>Duration:</h4>
<p></p>
<h4>Estimate:</h4>
<p></p>
</div>
</div>
<div class="tab">
<h2>Contact Information</h2>
<div class="contact-form">
<div class="contact-block">
<label for="fullname"></label>
<input type="text" name="Data[fullname]" class="contact" placeholder="Full Name">
</div>
<div class="contact-block">
<label for="email"></label>
<input type="email" name="Data[email]" class="contact" placeholder="Email Address">
</div>
<div class="contact-block">
<label for="phonenumber"></label>
<input type="number" name="Data[phonenumber]" class="contact" placeholder="Phone Number">
</div>
</div>
</div>
<div class="tab">
<h2>Payment Information</h2>
<div class="payment-form">
<label for="firstName"></label>
<input type="text" placeholder="First Name" name="Data[first_name]">
<label for="lastName"></label>
<input type="text" placeholder="Last Name" name="Data[last_name]">
<div id="dropin-container"></div>
</div>
</div>
<!-- Next/Previous Buttons -->
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
<!--Progress Bar -->
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>
</div>
</div>
</div>
</div>
The form uses Javascript to hide the steps of the form and then adds a submit button then it has reached the last step. 'congrats.php' is where I'll be processing the transaction. I am including both jQuery and Braintree JS in my header.
Edit: My solution was found by editing my HTML form. The form above used javascript to add a submit button once on the last step of the form. My new form now just has a button tag with type=submit and now the 'payment_method_nonce' is being created. For whatever reason, the Braintree server was not receiving my payment information upon submit.

php script is not able to verify data using anchor tag

I have a login form and i know how to submit data for verifying from database using submit button but i want to submit my data using anchor tag and it must be verified using php, what i did is as follows and it's not working :
index.php
<form class="sign-form" action="login_process.php" method="post" id="lg" name="form">
<fieldset>
<div class="row">
<span class="text">
<input type="email" name="email"/>
</span>
<span class="text">
<input type="password" name="pwd"/>
</span>
<input type="submit" value="Go" class="submit" name="submit" />
</div>
<div class="row">
<label for="check-1">Remember me</label>
<input type="checkbox" class="check" id="check-1" />
Forgot your password?
<?php
if(isset($_GET['loginFailed']) && !empty($_GET['loginFailed'])) {
$msg=$_GET['loginFailed'];
echo $msg;
}
?>
</div>
</fieldset>
<div class="action_btns">
<div class="one_half">
<i class="fa fa-angle-double-left"></i> Back
</div>
<div class="one_half last">
login
</div>
</div>
</form>
login_process.php
<?php
include("connection.php");
if(isset($_POST['submit'])) {
$email=$_POST['email'];
$pwd=$_POST['pwd'];
$password=md5($pwd);
$sql="SELECT * FROM `registration` where Email='$email' AND Password='$password'";
$van=mysqli_query($var,$sql);
$count=mysqli_num_rows($van);
if ($count==1) {
echo"hello";
session_start();
$_SESSION['email'] = $email;
header("location: login_success.php");
} else {
header("location:index.php?loginFailed=wrong password or email");
}
mysqli_close($var);
}
?>

The problem is the name of the controls.
Having a control named submit in your form is overriding form.submit();
The error in the browser console is that .submit() is not a function.
So please, just change the name of the submit button with something else and it is working good.
<form class="sign-form" action="login_process.php" method="post" id="lg" name="form">
<fieldset>
<div class="row">
<span class="text">
<input type="email" name="email"/>
</span>
<span class="text">
<input type="password" name="pwd"/>
</span>
<input type="submit" value="Go" name="submit" class="submit" id="btnSubmit" />
</div>
<div class="row">
<label for="check-1">Remember me</label>
<input type="checkbox" class="check" id="check-1" />
Forgot your password?
<?php
if(isset($_GET['loginFailed']) && !empty($_GET['loginFailed'])) {
$msg=$_GET['loginFailed'];
echo $msg;
}
?>
</div>
</fieldset>
<div class="action_btns">
<div class="one_half">
<i class="fa fa-angle-double-left"></i> Back
</div>
<div class="one_half last">
Register
</div>
</div>
</form>

I understand that you want to use an anchor to submit the form instead of a button. Several solutions exists for that, but let me say to you that using an anchor to submit a form requires the use of JavaScript to hook up the event. It's not safe in that if a user has JavaScript disabled, you won't be able to submit the form. It's better if you make a submit button looks like an anchor, like following:
<input type="submit" class="submitAnchor" value="Submit">
With this minimal style declaration:
.submitAnchor {
background-color: transparent;
border: none;
text-decoration: underline;
color: blue;
cursor: pointer;
}
Now, if you do really insist on using an anchor, you can e.g:
1.Event forwarding, activate the button submit event click when the anchor event click is activated:
<form name="form_lg" action="login_process.php" method="post" class="sign-form">
...
<input type="submit" name="submit" value="Go" class="submit">
<a href="#" onclick="form_lg['submit'].click()" class="btn btn_red">
Register
</a>
2.In case you don't want to forward events, you can e.g add a hidden input to store actions, like submit, back, etc. Then, you can catch the action value in the login_process.php file:
<form name="form_lg" action="login_process.php" method="post" class="sign-form">
...
<input type="hidden" name="action" value="" />
<a href="javascript:form_lg.submit()" onclick="form_lg['action'].value='submit'"
class="btn btn_red">Register</a>
In this case, you should change this line in login_process.php file. Instead of:
if(isset($_POST['submit'])){
Do this:
if($_POST['action']=='submit') {
Hope it's helpful!

Submit Button not disappearing with ng-disabled

I've set up a form with Angular integrated into it. In this form, I want the final submit button to only show up when the form is valid. There are a number of fields, but the only fields that are required are the one's for a user'a name, email-address, and a checkbox. The form recognizes when a required field is invalid, however I can't get the submit button to disappear (and subsequently reappear).
Here's code for reference:
index.html:
<form name="captions" ng-controller="CaptionCtrl>
<div class="current-page">
<div class="pages">
<div class="page active" id="page1">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption1" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(2)">NEXT</button> </div>
</div>
<div class="page" id="page2">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption2" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(3)">NEXT</button>
</div>
</div>
<div class="page" id="page3">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption3" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(4)">NEXT</button>
</div>
</div>
<div class="page" id="page4">
<img src="images/blank_image.jpg">
<div class="page-form-submit-page">
<h4>TO ENTER YOUR CAPTION IN THE CONTEST, TELL US YOUR NAME AND CONTACT METHOD.</h4>
<input type="text" ng-model="user.name" size="70" placeholder="Name" required>
<input type="email" ng-model="user.email" size="70" placeholder="E-mail Address" required>
<br>
<input type="checkbox" required>I have read and accept the Terms & Conditions
<br>
<input class="page-form-submit-page-submit" ng-disabled="captions | validateFields" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
</div>
</div>
<div class="page" id="page5">
<img src="images/blank_image.jpg">
<div class="page-form-thankyou">
<span><strong>THANK YOU</strong></span>
</div>
<div class="chapter-two-story-link"><span class="yellow">CLICK TO TELL US YOUR STORY</span></div>
</div>
</div>
</div>
</form>
If you notice towards the bottom, I have a ng-disabled set with "captions | validateFields". I've tried this with a simply truthy statement as well so its not the filter I set up.
Edit: With feedback I've gotten what I initially wanted to do working with ng-show. However, ng-disabled would actually be more appropriate for what I want. I've added relevant css.
style.css
.page-form-submit-page-submit {
display: block;
padding: 5px 15px;
border: none;
border-radius: 2px;
margin: 40px 400px 20px auto;
text-align: center;
background-color: #001F45;
color: #FFD200;
}
.page-form-submit-page-submit:active {
background-color: #0250B0;
}
Can anyone explain how to get the submit button to show only after all fields are valid?

Try ng-enabled="captions.$valid" to disable (visible but not clickable) and ng-show="captions.$valid" to hide the button if the form is invalid.
More about forms in angular: https://docs.angularjs.org/api/ng/directive/form

Not tested, but you can use the $valid property of your form like this:
<input class="page-form-submit-page-submit" ng-disabled="!captions.$valid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
But if you want the button to disappear completely, use ng-hide="!captions.$valid" instead of the ng-disabled directive

It's fairly easy
hide completly
<input class="page-form-submit-page-submit" ng-if="captions.$valid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
visually disable
<input class="page-form-submit-page-submit" ng-disabled="captions.$invalid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">

jquery addslashes to an entire form on submit

I am working with an annoyingly encrypted PHP script which doesn't let me at the source. The script outputs API results data via an HTML template file which uses variables like this:
%%Author%%
Amazon.com %%ListPrice%%
%%Price%%
%%ReviewLink%%
%%Description%%
I cannot convert this file to a php file. The encrypted php script looks for "phpzon.template.html". I want to grab the data loaded in each result i.e. %%Description%% and submit it to a php script for storage in a database. However, the content of %%Description%% for example contains html, so the data is breaking when entered into the database because of the " quotes and stuff in the data.
If it was a php file I could addslashes() to clean up the data before adding it to hidden form values, but I can't in this case. What is the jQuery way of doing this?
I tried serialize() thinking it might do this but it doesn't.
The form looks like this:
<form class="uk-form" method="post" id="add-to-cart" action="index.php?option=com_entrusters&view=itemform&Itemid=351">
<div class="uk-panel uk-panel-box uk-margin-small-bottom" style="box-shadow:none;padding: 15px 15px 0px;">
<div class="uk-grid">
<div class="uk-width-medium-8-10"><h4>%%Title%%</h4></div>
<div class="uk-width-medium-2-10"><button type="submit" href="" class="uk-button uk-button-small uk-button-primary uk-width-1-1">
<i class="uk-icon-shopping-cart"></i> Review & Order</button></div>
</div>
<div class="uk-grid" style="margin-top:0;">
<div class="uk-width-medium-2-10"><img src="%%Image%%" alt="%%Title%%" border="0" style="height:100px" /></div>
<div class="uk-width-medium-3-10">
<small>
%%Author%%
Amazon.com %%ListPrice%%
%%Price%%
<!-- %%YouSave%% -->
%%ReviewLink%%
</small>
<i class="uk-icon-external-link"></i> See on Amazon.com
%%AverageRating%%
</div>
<div class="uk-width-medium-5-10 ">
<input type="hidden" name="item" id="item" value="%%Title%%"/>
<input type="hidden" name="itemlist" id="itemlist" value=""/>
<input type="hidden" name="itemurl" id="itemurl" value="%%Link%%"/>
<input type="hidden" name="details" id="details" value="%%Description%%"/>
<input type="hidden" name="category" id="category" value="%%ProductGroup%%"/>
<input type="hidden" name="features" id="features" value="%%Features%%"/>
<input type="hidden" name="imageurl" id="imageurl" value="%%Image%%"/>
<input type="hidden" name="price" id="price" value="%%Price%%"/>
<div style="overflow-y: scroll; height:100px;"><p><small>%%Description%%</small></p></div>
<h5>%%ProductGroup%%</h5>
<!--<h5>%%FeaturesTitle%%</h5>
<p><small>%%Features%%</small></p>-->
</div>
</div>
</div>
</form>
<script>
jQuery( "form" ).on( "submit", function( event ) {
jQuery( this ).serialize();
});
</script>
When this form is submitted the results page shows broken html as in this image: