CODEWITHSUNDEEP
javascripthtmlforms
arieffirdaus
arieffirdaus

Reputation: 63

Validation form to check whether a word exists or not in the form field

I have an original form like this:

   <tr>
    <td>URL</td>
    <td><input type="text" name="url" placeholder="Enter Your Sitename URL" size="100" required></td>
   </tr>

and I want if a user fills in the URL column, they must write http:// or https:// at the beginning of the URL.

If they don't write it down there will be an alert and cannot be processed.

I already follow the url, but I can not submit my form.

Here is my code after I follow the link:

   <tr>
    <td>URL</td>
    <td><input type="text" name="url" placeholder="Enter the url of your site using http:// or https:// at the beginning" pattern="^http:// || ^https://" title="The column must begin with http:// or https://"  size="100" required></td>
   </tr>

and here is the image: enter image description here

So, how to create form validation to check the word at the beginning of the column?

Upvotes: 0

Views: 295

Answers (1)

Simone Rossaini
Simone Rossaini

Reputation: 8162

You can do that in so many ways.

Js:

function IsOk(form){

  const url = document.getElementById('url').value;

  if(url.includes("http://") || url.includes("https://")){
    form.submit();
  }else{
       alert('You must insert http:// or https://');
       return false;
  }
}
<form  method="post" onsubmit="event.preventDefault();IsOk(this);">
<input type="text" name="url" id="url" placeholder="Enter Your Sitename URL" size="100" required>
<button type="submit">click me</button>
</form>
You can use sweetalert for improve alert.
Html:

Set <input type="url"> like:

<form  method="post">
<input type="url" name="url" id="url" pattern="https://.*" placeholder="Enter Your Sitename URL" size="100" required>
<button type="submit">click me</button>
</form>

Upvotes: 2

Related Questions