HTML/Javascript: Prosta weryfikacja formularza przy wysyłaniu

Question

Próbuję sprawdzić poprawność mojego formularza w najprostszy możliwy sposób, ale jakoś nie działa, a po kliknięciu przycisku Wyślij po prostu przenosi mnie na następną stronę bez podawania ostrzeżenia:

HTML:

<form name="ff1" method="post" onsubmit="validateForm();"> 
<input type="text" name="email" id="fremail" placeholder="your@email.com" /> 
<input type="text" name="title" id="frtitle" placeholder="Title" /> 
<input type="text" name="url" id="frurl" placeholder="http://yourwebsite.com/" /> 
<input type="submit" name="Submit" value="Continue" />   
</form> 

Javascript:

<script type="text/JavaScript"> 

function validateURL(url) { 
    var reurl = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/; 
    return re.test(url); 
} 

function validateForm() 
{ 
    // Validate URL 
    var url = $("#frurl").val(); 
    if (validateURL(url)) { } else { 
     alert("Please enter a valid URL, remember including http://"); 
    } 

    // Validate Title 
    var title = $("#frtitle").val(); 
    if (title=="" || title==null) { } else { 
     alert("Please enter only alphanumeric values for your advertisement title"); 
    } 

    // Validate Email 
    var email = $("#fremail").val(); 
    if ((/(.+)@(.+){2,}\.(.+){2,}/.test(email)) || email=="" || email==null) { } else { 
     alert("Please enter a valid email"); 
    } 
    return false; 
} 
</script> 

Oto również w jsfiddle http://jsfiddle.net/CrLsR/

Z góry dziękuję

Answer 1

Masz kilka błędów. najpierw trzeba zwrócić wartość z funkcji w znacznikach html: <form name="ff1" method="post" onsubmit="return validateForm();">

drugim miejscu w jsfiddle kod wewnątrz onLoad który następnie formularz nie będzie wiedział - i trwać trzeba wrócić prawda z funkcji, jeżeli wszyscy sukces walidacja - naprawiłem pewne problemy w aktualizacji:

https://jsfiddle.net/mj68cq0b/

function validateURL(url) { 
    var reurl = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/; 
    return reurl.test(url); 
} 

function validateForm() 
{ 
    // Validate URL 
    var url = $("#frurl").val(); 
    if (validateURL(url)) { } else { 
     alert("Please enter a valid URL, remember including http://"); 
     return false; 
    } 

    // Validate Title 
    var title = $("#frtitle").val(); 
    if (title=="" || title==null) { 
     alert("Please enter only alphanumeric values for your advertisement title"); 
     return false; 
    } 

    // Validate Email 
    var email = $("#fremail").val(); 
    if ((/(.+)@(.+){2,}\.(.+){2,}/.test(email)) || email=="" || email==null) { } else { 
     alert("Please enter a valid email"); 
     return false; 
    } 
    return true; 
} 

Answer 2

Musisz zwrócić funkcję sprawdzania poprawności. Coś takiego:

onsubmit="return validateForm();" 

Następnie funkcja sprawdzania poprawności powinna zwracać wartość false w przypadku błędów. Jeśli wszystko jest w porządku, powróćmy do prawdy. Pamiętaj, że serwer również musi zatwierdzić.

Answer 3

Najprostszym walidacja jest następujący:

<form name="ff1" method="post"> 
 
    <input type="email" name="email" id="fremail" placeholder="your@email.com" /> 
 
    <input type="text" pattern="[a-z0-9. -]+" title="Please enter only alphanumeric characters." name="title" id="frtitle" placeholder="Title" /> 
 
    <input type="url" name="url" id="frurl" placeholder="http://yourwebsite.com/" /> 
 
    <input type="submit" name="Submit" value="Continue" />   
 
</form>

Wykorzystuje HTML5 Attributes (jak jak pattern)

javascript: brak.

Answer 4

Ujawnienie: Napisałem FieldVal.

Oto rozwiązanie z wykorzystaniem FieldVal. Używając FieldVal UI do zbudowania formularza, a następnie FieldVal do sprawdzenia poprawności danych wejściowych, możesz przekazać błąd z powrotem do formularza.

Możesz nawet uruchomić kod weryfikacyjny na zapleczu (jeśli używasz węzła) i pokazać błąd w formularzu bez ręcznego okablowania wszystkich pól.

żywo demo: http://codepen.io/MarcusLongmuir/pen/WbOydx

function validate_form(data) { 
    //This would work on the back end too (if you're using Node) 

    //Validate the provided data 
    var validator = new FieldVal(data); 
    validator.get("email", BasicVal.email(true)); 
    validator.get("title", BasicVal.string(true)); 
    validator.get("url", BasicVal.url(true)); 
    return validator.end(); 
} 


$(document).ready(function(){ 

    //Create a form and add some fields 
    var form = new FVForm() 
    .add_field("email", new FVTextField("Email")) 
    .add_field("title", new FVTextField("Title")) 
    .add_field("url", new FVTextField("URL")) 
    .on_submit(function(value){ 

     //Clear the existing errors 
     form.clear_errors(); 

     //Use the function above to validate the input 
     var error = validate_form(value); 

     if (error) { 
      //Pass the error into the form 
      form.error(error); 
     } else { 
      //Use the data here 
      alert(JSON.stringify(value)); 
     } 
    }) 

    form.element.append(
     $("<button/>").text("Submit") 
    ).appendTo("body"); 

    //Pre-populate the form 
    form.val({ 
     "email": "user@example.com", 
     "title": "Your Title", 
     "url": "http://www.example.com" 
    }) 
}); 

Answer 5

HTML Form Element Validation
Run Funkcja

<script> 
      $("#validationForm").validation({ 
       button: "#btnGonder", 
       onSubmit: function() { 
        alert("Submit Process"); 
       }, 
       onCompleted: function() { 
        alert("onCompleted"); 
       }, 
       onError: function() { 
        alert("Error Process"); 
       } 
      }); 
</script> 

Przejdź do przykładu i pobierz https://github.com/naimserin/Validation

Answer 6

Używam tego naprawdę prostą małą bibliotekę JavaScript do sprawdź kompletny formularz w jednym wierszu kodu:

jsFormValidator.App.create().Validator.applyRules('Login'); 

Sprawdź tutaj: jsFormValidator

Zaletą tego narzędzia jest to, że po prostu napisać obiekt JSON czarownica opisać swoje reguły sprawdzania poprawności, nie ma potrzeby, aby umieścić linię jak:

<input type=text name="username" data-validate placeholder="Username"> 

Dane- validate jest wstrzykiwany we wszystkie pola wejściowe formularza, ale podczas korzystania z jsFormValidator nie potrzebujesz tej ciężkiej składni, a walidacja zostanie zastosowana do formularza za jednym razem, bez potrzeby dotykania kodu HTML.