How to prevent submit if user inputs a link?

Question

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

I would suggest making the changes server-side first. There's nothing stopping anyone from post to your php without the page at the moment. May be take a look at CSRF (Cross-Site Request Forgery) protection too. — phuzi, Mar 10 '21 at 16:16
@phuzi You're absolutely right I need to also take care of the server-side but while I work on that I can at least use this as a temporary solution. — John, Mar 11 '21 at 12:45

score 0 · Answer 1 · answered Mar 10 '21 at 16:18

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

score 0 · Accepted Answer · answered Mar 10 '21 at 16:25

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.

Perfect ! And yes you're right I also need to work on a server side solution. Thanks a lot for the help :) — John, Mar 11 '21 at 12:43
Forgot 1 thing...what if the link is at the middle of the message and not at the begging ? — John, Mar 11 '21 at 13:07
@John the regex will match any link regardless of where it is in the text. You can use that text field that appears when you click "run code snippet" in order to test out any strings that you have in mind. If this doesn't meet your needs you could also try a different regex from the stack overflow question that i linked in my answer or you can use some library that's dedicated to finding links. — Abir Taheer, Mar 11 '21 at 13:12

How to prevent submit if user inputs a link?

2 Answers2