1

Good evening. I have created a function for an input field, which the user is asked to select url for his account.

The piece that communicates with the database I have created and works perfectly. Also the piece to make the letters lower.

But I do not know how to district accepting special characters and spaces.

I found some solution in internet but input it call second function. I dont want to change my function. I want somehow to merge in my existing function.

My html is 

<input type="text" name="urlcheck" value="" id="urlcheck" class="form-control" placeholder="Write your url. " required  onkeyup="urlcheck()"/>

My JS is

function urlcheck(){  

var x = document.getElementById("urlcheck");
x.value = x.value.toLowerCase();

var urlcheck = $('#urlcheck').val();  
    if(urlcheck != '')  
           {  
    $.ajax({  
      url:"<?php echo base_url(); ?>portolio/check_url",  
      method:"POST",  
      data:{url:url},  
      success:function(data){ 
      data.trim();
      if(data == '1') {
                             $('#url_result').html('<label class="text-danger">Url is not free</label>'); 
    } else {   
$('#url_result').html('<label class="text-success">Url is free.</label>');

                             }
                         }
                });  
           }  
};

The solution i find but i dont know how merge is this:

    <script type="text/javascript">
    function blockSpecialChar(e){
        var k;
        document.all ? k = e.keyCode : k = e.which;
        return ((k > 96 && k < 123) || k == 8 || (k >= 48 && k <= 57));
        }
    </script>
</head>
<body>
    <form id="frm" runat="server">
      <input type="text" name="folderName"  onkeypress="return blockSpecialChar(event)"/>
    </form>

So... I thing i need help how "insert" the bellow code in my ajax function

var k;
            document.all ? k = e.keyCode : k = e.which;
            return ((k > 96 && k < 123) || k == 8 || (k >= 48 && k <= 57));

EDIT: In my input field i dont need from user to write the whole url. Only the last part. For example if a user want to have example.com/myname. The user must fill the myname. That i want to check!

Gotham
  • 13
  • 1
  • 4
  • 1
    Use HTMLInputElement `pattern` attribute with a regex - there is no function or server needed. – Randy Casburn Nov 03 '18 at 01:15
  • My strong recommendation is that you make a _leading/hinting_ placeholder value, and a very broad url validator using a pattern attribute (as Randy said). Then ONLY check the url AFTER the user is completely done typing it -- using onblur or probably better with onsubmit(). Then fire your ajax function and use this: https://stackoverflow.com/questions/4437223/what-is-the-best-way-to-check-if-a-url-exists-in-php To try to accommodate every url will be a very hard pattern to design. Take reasonable steps, but don't only rely on regex to protect you. – mickmackusa Nov 03 '18 at 03:07
  • Possible duplicate of [What is the best way to check if a URL exists in PHP?](https://stackoverflow.com/questions/4437223/what-is-the-best-way-to-check-if-a-url-exists-in-php) – mickmackusa Nov 03 '18 at 03:08
  • Hi @mickmackusa I edit my first question because maybe i didnt explain very good (my english is not very good). I need user typing only the last part and not whole url. So i want only letters and number, without spaces and special characters. This you tell me about change onkeyup with onblur or on submit, It has to do with resourses or something else? I mean is very hard for my site to send query in every key? – Gotham Nov 03 '18 at 11:51

2 Answers2

1

You don't need to program javascript for this task. Just use the pattern attribute.

Try my runnable snippet. Type in a non-alphanumeric character, then click Submit. The submission will be halted.

<form>
<input type="text" placeholder="example.com/[your input]" pattern="[a-zA-Z0-9]+">
<button type="submit">Submit</button>
</form>
mickmackusa
  • 43,625
  • 12
  • 83
  • 136
  • this allows me to use ÄÖÜ !"§$%&/()= –  Apr 10 '21 at 09:24
  • @Gismo I cannot reproduce your issue. I just had a try using a [w3schools demo](https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_pattern) with the pattern in my answer and your input and it worked as expected. – mickmackusa Apr 10 '21 at 11:12
0

Use this pattern i found. It only accepts urls. 

<input type="text" name="urlcheck" value="" id="urlcheck" class="form-control" 
placeholder="Write your url. " required  onkeyup="urlcheck()" required=""  data-bv- 
regexp="true" data-bv-regexp-regexp="https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9]\.[^\s]{2,}"
            data-bv-regexp-message="Invalid Url">
RichardBlack
  • 13
  • 5