एचटीएमएल/जावास्क्रिप्ट: सबमिट करने पर सरल फॉर्म सत्यापन

Question

मैं अपने फॉर्म को सबसे आसान तरीके से मान्य करने की कोशिश कर रहा हूं, लेकिन किसी भी तरह काम नहीं कर रहा है और जब मैं इसे सबमिट करता हूं तो मुझे चेतावनी संदेश दिए बिना मुझे अगले पृष्ठ पर ले जाता है:

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> 

जावास्क्रिप्ट:

<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> 

यहाँ jsfiddle http://jsfiddle.net/CrLsR/

012 में भी है

अग्रिम धन्यवाद

Answer 1

आपके पास कई त्रुटियां हैं। - और पिछले आप सभी अगर समारोह से सच वापस लौटाना होगा jsfiddle अपनी जगह में <form name="ff1" method="post" onsubmit="return validateForm();">

दूसरा ऑनलोड अंदर कोड जो तब प्रपत्र पहचान नहीं होगा: पहले आप HTML मार्कअप में समारोह से मान देने के लिए है इस प्रकार

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

आपको सत्यापन कार्य वापस करने की आवश्यकता है। कुछ ऐसा:

onsubmit="return validateForm();" 

फिर सत्यापन कार्य त्रुटियों पर झूठी वापसी करनी चाहिए। अगर सबकुछ ठीक है तो सच हो जाता है। याद रखें कि सर्वर को भी मान्य करना है।

Answer 3

सरल मान्यता है: - मान्यता सफलता मैं अद्यतन में कुछ मुद्दों पर तय

<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>

यह का उपयोग करता है HTML5 Attributes जावास्क्रिप्ट (pattern के रूप में की तरह)

: कोई नहीं।

Answer 4

प्रकटीकरण: मैंने फ़ील्डवेल लिखा था।

यहां FieldVal का उपयोग कर एक समाधान है। एक फॉर्म बनाने के लिए FieldVal UI का उपयोग करके और फिर इनपुट सत्यापित करने के लिए FieldVal, आप सीधे त्रुटि में त्रुटि को पारित कर सकते हैं।

आप बैकएंड पर सत्यापन कोड भी चला सकते हैं (यदि आप नोड का उपयोग कर रहे हैं) और मैन्युअल रूप से सभी फ़ील्ड को तारों के बिना फॉर्म में त्रुटि दिखाएं।

लाइव डेमो: 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 फ़ॉर्म तत्व मान्यता
भागो समारोह
उदाहरण के लिए

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

जाओ और https://github.com/naimserin/Validation

Answer 6

मैं करने के लिए यह वास्तव में आसान छोटे JavaScript लाइब्रेरी का उपयोग डाउनलोड कोड की एक पंक्ति में एक पूर्ण रूप को मान्य करें:

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

यहाँ की जांच: jsFormValidator

इस उपकरण का लाभ यह है कि आप सिर्फ एक JSON ऑब्जेक्ट डायन अपने सत्यापन नियमों की तरह लाइन डालने के लिए कोई जरूरत का वर्णन है, लिखना है:

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

डेटा- मान्यता आपके फॉर्म के सभी इनपुट फ़ील्ड में इंजेक्शन दी जाती है लेकिन जब jsFormValidator का उपयोग करते समय, आपको इस भारी वाक्यविन्यास की आवश्यकता नहीं होती है और सत्यापन आपके HTML कोड को स्पर्श करने की आवश्यकता के बिना, एक शॉट में आपके फॉर्म पर लागू किया जाएगा।