Input nur URL erlauben abzuspeichern

[Fonex47]

Guten Abend zusammen, ich suche die ganze Zeit im Internet, werde entweder nicht fündig oder bin einfach zu doof um die richtigen begriffe zu finden für das was ich möchte.

Ich möchte das in meinem Input nur links abgespeichert werden dürfen, das heißt nicht einfach irgendein wort oder text.

Mfg

 

[Sempervivum]

Dazu kannst Du die Formularvalidation von HTML5 verwenden, siehe hier:
https://wiki.selfhtml.org/wiki/HTML...ormularen#vorgeschriebene_Formate_mit_patternRegex für eine URL z. B. hier:
https://www.regextester.com/94502

 

[ComFreek]

Clientseitige Validierung im Browser ist natürlich nur für UX-Zwecke, denn jeder kann das umgehen. Du musst es mindestens/auch auf dem Server validieren.

 

[Fonex47]

Dazu kannst Du die Formularvalidation von HTML5 verwenden, siehe hier:
https://wiki.selfhtml.org/wiki/HTML...ormularen#vorgeschriebene_Formate_mit_patternRegex für eine URL z. B. hier:
https://www.regextester.com/94502

Hab ich alles versucht irgendwie klappt das nicht.

Clientseitige Validierung im Browser ist natürlich nur für UX-Zwecke, denn jeder kann das umgehen. Du musst es mindestens/auch auf dem Server validieren.

Mir würde eigentlich reichen das man beim absenden blockieren tut, wie bei einem E-Mail Input.
Da meine Community in der mehrheit mit dem Smartphone meinen Chat besucht.
Nur komme ich irgendwie beim abspeichern durch er speichert alles ab egal was ich rein schreibe.

Könnte man das in die JS function einbauen oder besser in die PHP function ?

PHP

if(isset($_POST['edit_website'], $_POST['new_website'])){
    $new_website = escape($_POST['new_website']);
    if($new_website == $data['website']){  // this is from session (checking if new url and old same or not)
        echo 1;
        die();
    }

    $mysqli->query("UPDATE boom_users SET website = '$new_website' WHERE user_id = '{$data['user_id']}'");
    boomConsole($data['user_id'], 'change_website', array('custom'=>$data['website']));
    echo 1;
    die();
}

JS

changeMyWebsite = function(){
    var myNewWebsite = $('#my_new_website').val();
    $.post('system/action_profile.php', {
        edit_website: 1,
        new_website: myNewWebsite,
        token: utk,
        }, function(response) {
            if(response == 1){
                $('#website').text(myNewWebsite);
                hideOver();
            }
            /*else if(response == 2){
                callSaved(system.invalidWebsite, 3);
                $('#my_new_website').val('');
            }
            else {
                callSaved(system.error, 3);
                hideOver();
            }*/
    });
}

HTML

<div class="pad_box">
    <div class="boom_form">
        <p class="label">Internet Seite</p>
        <input type="url" id="my_new_website" value="<?php echo $data['website']; ?>" class="full_input"/>
    </div>
    <button onclick="changeMyWebsite();" class="reg_button theme_btn"><i class="fa fa-save"></i> <?php echo $lang['save']; ?></button>
    <button class="cancel_over reg_button default_btn"><?php echo $lang['cancel']; ?></button>
</div>

 

[ComFreek]

Du scheinst nur eine escape() Funktion gegen SQL Injections und XSS zu benutzen. Das klingt mir danach, dass es kaputt sein könnte. Im Allgemeinen benutzt man für jeden Ausgabekontext eine eigene Funktion.

Könnte man das in die JS function einbauen oder besser in die PHP function ?

Für bessere UX ist die erste Validierung am besten im JS.

 

[Sempervivum]

Hab ich alles versucht irgendwie klappt das nicht.

Das liegt wahrscheinlich daran, dass die Formularvalidierung ohne weitere Maßnahmen erst beim Abschicken des Formulars durch Submit greift.
Du kannst zwei Dinge tun:
1. Das Eingabefeld rot markieren solange die Eingabe nicht OK ist:

#my_new_website:not(:valid) {
    border: 2px solid red;
}

2. Vor dem Abschicken über Ajax die Eingabe prüfen:

changeMyWebsite = function(){
    var myNewWebsite = $('#my_new_website').val();
    if (document.getElementById('my_new_website').validity.valid) {
        $.post('system/action_profile.php', {

 

[Technipion]

Hab ich alles versucht irgendwie klappt das nicht.

Das ist keine ausreichende Fehlerbeschreibung!

Dieses Snippet erzeugt bei mir ein Textfeld, das nur URLs akzeptiert:

<p>
 Snippet für <a href="https://www.tutorials.de/threads/input-nur-url-erlauben-abzuspeichern.408961/#post-2117019">tutorials.de</a>
</p>
<label for="urlinput">URL</label>
<input required pattern="^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$"
 title="Bitte URL eingeben">

Außerdem: Wie @ComFreek schon geschrieben hat, solltest du Eingaben immer auch serverseitig validieren. Hier ist ein Beispiel wie man das in PHP tun kann:

https://www.w3schools.com/php/php_form_url_email.asp

Für bessere UX ist die erste Validierung am besten im JS.

Für kosmetische Effekte bietet sich das natürlich auch an. Es ersetzt aber keine Validierung durch den Server.

Gruß Technipion

 

[Fonex47]

Das ist keine ausreichende Fehlerbeschreibung!

Dieses Snippet erzeugt bei mir ein Textfeld, das nur URLs akzeptiert:

<p>
Snippet für <a href="https://www.tutorials.de/threads/input-nur-url-erlauben-abzuspeichern.408961/#post-2117019">tutorials.de</a>
</p>
<label for="urlinput">URL</label>
<input required pattern="^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$"
title="Bitte URL eingeben">

Außerdem: Wie @ComFreek schon geschrieben hat, solltest du Eingaben immer auch serverseitig validieren. Hier ist ein Beispiel wie man das in PHP tun kann:

https://www.w3schools.com/php/php_form_url_email.asp

Für kosmetische Effekte bietet sich das natürlich auch an. Es ersetzt aber keine Validierung durch den Server.

Gruß Technipion

Wie gesagt, durch den "required pattern" im input, konnte ich trotzdem irgendwelche wörter eingeben und abspeichern. Aber nun klappt es ja.

Danke für eure schnellen und hilfreichen Antworten.