Input nur URL erlauben abzuspeichern


Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Fonex47

Mitglied
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
 

ComFreek

Mod | @comfreek
Moderator
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

Mitglied
Dazu kannst Du die Formularvalidation von HTML5 verwenden, siehe hier:
Regex für eine URL z. B. hier:
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
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

Javascript:
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
PHP:
<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

Mod | @comfreek
Moderator
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

Erfahrenes Mitglied
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:
Code:
#my_new_website:not(:valid) {
    border: 2px solid red;
}
2. Vor dem Abschicken über Ajax die Eingabe prüfen:
Code:
changeMyWebsite = function(){
    var myNewWebsite = $('#my_new_website').val();
    if (document.getElementById('my_new_website').validity.valid) {
        $.post('system/action_profile.php', {
 

Technipion

Erfahrenes Mitglied
Hab ich alles versucht irgendwie klappt das nicht.
Das ist keine ausreichende Fehlerbeschreibung!

Dieses Snippet erzeugt bei mir ein Textfeld, das nur URLs akzeptiert:
HTML:
<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:


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

Mitglied
Das ist keine ausreichende Fehlerbeschreibung!

Dieses Snippet erzeugt bei mir ein Textfeld, das nur URLs akzeptiert:
HTML:
<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:



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.
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…