We Keep Coding

How to prevent submit if user inputs a link?

I have run into a bit of a problem recently.
I am still in the process of learning JS so i couldn't figure this one out alone :( .
I have been getting a lot of spam recently through this form I have on a website and I cant seem to fix it...I tried a few solutions with Jquery and JS but I cant get it to work so I just deleted them.
100% of the spam I receive has a link in the message so I would like to make it so the submit button stay disabled unless 2 conditions are met :
The message must contain more than 12 characters
The textarea must NOT contain any link
here is the html i got :
<form action="php/contact.php" method="POST">
<h1>Contact-us</h1>
<input type="text" id="name" name="name" placeholder="Name" required>
<input type="email" id="email" name="email" placeholder="Email" required>
<input type="tel" id="tel" name="tel" placeholder="Phone" required>
<input type="text" class="subject" id="subject" name="subject" placeholder="Subject" required>
<textarea name="message" id="messag" class="textarea" placeholder="Message" required></textarea>
<button type="submit" class="submit" name="submit" id="disabled">Send</button>
</form>
also I am preventing a page refresh using ajax, and any JS i tried would conflict or be ignored by the ajax request, here is the code :
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: '/php/contact.php',
data: $('form').serialize(),
success: function () {
alert('Your message was sent successfully');
}
});
});
});
a fairly simple form i think...any help is greatly appreciated !
Thanks

You can probably check to make sure that the body of the message sent by the user doesn't have a link using a regex to match links.
The regex I used was taken directly from the answer of this question: Detect URLs in text with JavaScript
$("#my-form").on("submit", ev => {
ev.preventDefault();
const urlRegex = /(https?:\/\/[^\s]+)/gm;
const message = $("#message-field").val();
if(! message.match(urlRegex)){
// you can send the message with ajax
// ...ajax code
alert("message sent");
} else {
// there was a link in the message, give a warning or something
alert("link detected");
}
});
<!-- Import JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
<p>Message: </p>
<textarea name="message" id="message-field" placeholder="Try adding text like https://google.com" style="width:200px;height:100px;"></textarea/>
<br/>
<button>submit</button>
</form>
This is only a front-end solution. Make sure you also have a check on the backend because javascript based validation can be easily bypassed.

Message length and filtering links still leave a number of options for spammers to breach your form.
You can quite easily implement a Google Recaptcha or implement your own in whatever backend language you're using.
The conditions you're looking for in your OP are,
if ($('#messag').html().length > 12)
if ($('#messag').html.indexOf('href') >= 0)
Cheers

Why can't my javascript redirect the following code, I've tried multiple solution that i found in StackOverFlow

I have tried multiple of things making the code to redirect, my teacher told me that I need to use method POST, while the following code is the working one which the method get, if I change the method to POST it cannot redirect. I tried using the location.href inside my code, it doesn't seem to work at all. I even tried putting the return false in my javascript. May I know how can I fix these issues?
The following are my code for my form
<form action="/Membership/member-profilepage/member_home.html">
<div class="row">
<div class="col-1">
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<input type="checkbox" id="rmbpw" name="rmbpw" value="rmbpw">
<label for="rmbpw" id="rmbpw" name="rmbpw"> RememberMe</label>
<input type="submit" value="Login" onclick="login()">
</div>
<script src="login.js"></script>
</div>
</form>
This will be the code for my javascript
function login(){
alert("Login Successfully!");
}

Oh, Guys, I figure out an answer after doing a couple more research and trying a few more things. I cannot use input type="submit". Hence, I need to use input type="button" to do the redirection.

Integrating and validating invisible recaptcha

I want to add recaptcha to a form, I registered for it and got the keys.
<form>
<input type="text" name="name" />
<input type="email" name="email" />
<textarea name="message"></textarea>
<input type="submit" name="submit" value="Send" />
</form>
Then I added this code to the page:
<script src='https://www.google.com/recaptcha/api.js?render=My_Website_Key'></script>
Next I added this Javascript/Jquery code:
//When page is loaded.
$(document).ready(function() {
grecaptcha.ready(function() {
grecaptcha.execute('The Website Key', {action: 'homepage'}).then(function(token) {});
}); //Recaptcha ready
}); //Page is loaded
Finally I'm trying to verify, But there is no hidden element with a value to use or anything to send to the backend to check.
So how to check from the backend?

Take a look at:
https://developers.google.com/recaptcha/docs/invisible
You can link it to the submit button and link it to inputs fields

How to get around the FormSpree redirect?

I got my website over on the Github Pages Service. I'm trying to implement the FormSpree free contact form but after you submit the form, it redirects you to a different website. Something I'd like to avoid. So I looked it up on the internet and of course others wanted to get rid of it too (I omitted my email in the below picture).
This is the form I got above but it doesn't actually work at all. It worked before I tried to fiddle with it though.
Here is what the form looks like by default from FormSpree:
<form action="//formspree.io/your#email.com"
method="POST">
<input type="text" name="name">
<input type="email" name="_replyto">
<input type="submit" value="Send">
</form>
Here is my version (which worked fine before I tried to get around the redirect)
<div class=modal-body style="background-color: #454545">
<p>Please use the form below to contact us regarding feedback or any questions you may have!
We will never use the information given below to spam you and we will never pass on your
information to a 3rd party.</p>
<p>As we are using <a target="_blank" href="http://formspree.io">FormSpree</a> for this form
please consult their privacy policy for any questions regarding this matter.</p>
<form id="contactform" method="POST">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Name</span>
<input name="form-name-input" type="text" name="name" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Email</span>
<input name="form-email-input" type="email" name="_replyto" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Subject</span>
<input name="form-subject-input" type="text" name="subject" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Description</span>
<textarea name="form-description-input" name="description" class="form-control" rows="4" cols="60" required></textarea>
</div>
<input type="text" name="_gotcha" style="display:none" />
<input class="btn btn-success" data-dismiss="modal" type="submit" id="form-submit-btn" value="Submit">
<input type="hidden" name="_next" value="http://www.dynamicrealities.net" onclick="FormSentConfirmation()"/>
</div>
<script>
var contactform = document.getElementById('contactform');
contactform.setAttribute('action', '//formspree.io/' + 'dynamicrealities#gmail.com');
</script>
</form>
</div>
<div class="modal-footer" style="background-color: #333333">
<button class="btn btn-danger btn-bg" data-dismiss="modal" type="button" id="form-dismiss-btn" onclick="">Close</button>
</div>
And when I call _next I want it to execute the following alert:
function FormSentConfirmation() {
alert('Thanks for the email, we\'ll be in touch promptly.');
}
When I press the Submit button, all that happens is that the form goes away but I don't receive any emails. I'm probably just doing this wrong as I am fairly new still to HTML/JavaScript.

Update: The feature available only on paid plans.
Use this hidden input field inside the form for redirection after form submission. You can redirect users to a page that you like or you have created by using this code block.
<input type="hidden" name="_next" value="//site.io/thanks.html" />
replace value with a valid thank-you page URL.
Follow this link for a tutorial on how to use Formspree and also a video demo

Follow their AJAX example at the bottom: https://formspree.io/
$("#sendMessage").on("click", function() {
$.ajax({
url: "//formspree.io/dynamicrealities#gmail.com",
method: "POST",
data: {message: "hello!"},
dataType: "json"
});
});
Remember to include jQuery as well for this to work. Remove the:
var contactform = document.getElementById('contactform');
contactform.setAttribute('action', '//formspree.io/' + 'dynamicrealities#gmail.com
and replace it with my code and change the selector. Or use $("form").on("submit"...
Here is my example, which sends you a mail and prompts an alert for the user: http://jsfiddle.net/228d4snb/
Do anything you'd like to do right before that return false;

You can put the form in an iframe so only the iframe gets redirected. What I did was create a separate html doc with just the contact form html (and any associated scripts) and then in my actual contact.html page I put:
<iframe src="contact-form.html" class="container"></iframe>.
Style the iframe to the appropriate size and with no border and it should work swimmingly.

Can't cllick submit button

I'm a newb trying to learn to create a form page. Can someone tell me why the submit button isn't working? I thought having the javascript function would fix this. Thanks
<script type="text/javascript">
function submitform()
{
document.forms["contactform"].submit();
}
</head>
<body>
<div id="contact-form">
<form method="POST" id="contactform" action="bespoke-form-handler.php">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" />
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_email" />
</div>
<div class="button">
<button type="submit" name="submit">Submit</button>
</div>
</form>
<script language="JavaScript">
var frmvalidator = new Validator("contactform");
frmvalidator.addValidation("name","req","Please provide your name");
frmvalidator.addValidation("mail","req","Please provide your email");
frmvalidator.addValidation("mail","email","Please enter a valid email address");
</script>
</body>

The problem is the button name, since you have used it as submit, document.forms["contactform"].submit will refer to the element not the submit method so it will cause an error like Uncaught TypeError: document.forms.contactform.submit is not a function
<button type="submit" name="someothername">Submit</button>
Demo: Problem, Solution

It makes no sense to have a <a> tag inside a <button> tag because it will prevent standard HTML form submission that's done automatically via submit buttons, just remove it.
You also do not need your first JavaScript function to submit your form, the submit button takes care of this.

Change your submit button to
<input type="submit" name="submit" />