एचटीएमएल 5 सत्यापन जब इनपुट प्रकार "सबमिट" नहीं होता है

Question

मैं फ़ील्ड मान्य करने के लिए HTML5 का उपयोग कर रहा हूं। मैं एक बटन क्लिक पर जावास्क्रिप्ट का उपयोग कर फॉर्म जमा कर रहा हूँ। लेकिन एचटीएमएल 5 सत्यापन काम नहीं करता है। यह तब काम करता है जब इनपुट प्रकार submit है। क्या हम जावास्क्रिप्ट सत्यापन का उपयोग करने या submit पर प्रकार बदलने के अलावा कुछ भी कर सकते हैं?

<input type="text" id="example" name="example" value="" required> 
<button type="button" onclick="submitform()" id="save">Save</button> 

मैं समारोह submitform() में पर्चे को जमा कर रहा हूँ:

यह एचटीएमएल कोड है।

Answer 1

एचटीएमएल 5 फॉर्म सत्यापन प्रक्रिया उन स्थितियों तक सीमित है जहां फॉर्म सबमिट बटन के माध्यम से सबमिट किया जा रहा है। Form submission algorithm स्पष्ट रूप से कहता है कि जब फॉर्म submit() विधि के माध्यम से सबमिट किया जाता है तो सत्यापन निष्पादित नहीं किया जाता है। जाहिर है, विचार यह है कि यदि आप जावास्क्रिप्ट के माध्यम से एक फॉर्म जमा करते हैं, तो आपको सत्यापन करना होगा।

हालांकि, आप checkValidity() विधि का उपयोग करके, HTML5 विशेषताओं द्वारा परिभाषित बाधाओं के खिलाफ (स्थैतिक) फ़ॉर्म सत्यापन का अनुरोध कर सकते हैं। यदि आप एचटीएमएल 5 फॉर्म सत्यापन में ब्राउज़र के समान त्रुटि संदेशों को प्रदर्शित करना चाहते हैं, तो मुझे डर है कि आपको सभी बाधित क्षेत्रों की जांच करनी होगी, क्योंकि validityMessage संपत्ति फ़ील्ड (नियंत्रण) की संपत्ति है, फॉर्म नहीं । एक भी कंस्ट्रेन्ड क्षेत्र के मामले में, प्रस्तुत मामले में, इस पाठ्यक्रम का मामूली बात है:

function submitform() { 
    var f = document.getElementsByTagName('form')[0]; 
    if(f.checkValidity()) { 
    f.submit(); 
    } else { 
    alert(document.getElementById('example').validationMessage); 
    } 
} 

Answer 2

<button type="submit"> साथ प्रयास करें आप <form ....... onsubmit="submitform()">

Answer 3

कर आप अपने आदानों संलग्न प्रपत्र टैग का उपयोग करना चाहिए द्वारा submitform() की कार्यक्षमता प्रदर्शन कर सकते हैं। और इनपुट प्रकार जमा करें।
यह काम करता है।

<form id="testform"> 
<input type="text" id="example" name="example" required> 
<button type="submit" onclick="submitform()" id="save">Save</button> 
</form> 

चूंकि एचटीएमएल 5 सत्यापन केवल सबमिट बटन के साथ काम करता है, आपको इसे वहां रखना होगा। फॉर्म प्रपत्र से बचने के लिए डिफ़ॉल्ट कार्रवाई को रोकने के द्वारा वैध होने पर आप फ़ॉर्म सबमिशन से बच सकते हैं।

document.getElementById('testform').onsubmit= function(e){ 
    e.preventDefault(); 
} 

यह वैध होने पर आपका सत्यापन देगा और वैध होने पर फॉर्म सबमिट नहीं करेगा।

Answer 4

मैं देर से हो सकता है, लेकिन जिस तरह से मैंने किया था यह एक छिपा इनपुट प्रस्तुत बनाने के लिए था, और बुला यह है जमा करने पर हैंडलर पर क्लिक करें। जैसे (सादगी के लिए jQuery का उपयोग) कुछ:

<input type="text" id="example" name="example" value="" required> 
<button type="button" onclick="submitform()" id="save">Save</button> 
<input id="submit_handle" type="submit" style="display: none"> 

<script> 
function submitform() { 
    $('#submit_handle').click(); 
} 
</script> 

Answer 5

इस आजमाएं:

<script type="text/javascript"> 
    function test 
    { 
     alert("hello world"); //write your logic here like ajax 
    } 
</script> 

<form action="javascript:test();" > 
    firstName : <input type="text" name="firstName" id="firstName" required/><br/> 
    lastName : <input type="text" name="lastName" id="lastName" required/><br/> 
    email : <input type="email" name="email" id="email"/><br/> 
    <input type="submit" value="Get It!" name="submit" id="submit"/> 
</form> 

Answer 6

एचटीएमएल 5 मान्यकरण कार्य केवल जब बटन प्रकार प्रस्तुत किया जाएगा

परिवर्तन -

<button type="button" onclick="submitform()" id="save">Save</button> 

से -

<button type="submit" onclick="submitform()" id="save">Save</button> 

Answer 7

मैं ऐसा करने का एक नया तरीका जोड़ना चाहता था जिसे मैंने हाल ही में भाग लिया था। भले ही फॉर्म सत्यापन मान्य नहीं होता है जब आप submit() विधि का उपयोग करके फ़ॉर्म जमा करते हैं, तो प्रोग्राम सबमिटिक रूप से सबमिट बटन पर क्लिक करने से आपको कुछ भी नहीं रोकता है। भले ही यह छिपा हुआ हो।

<form> 
    <input type="text" name="title" required /> 
    <button style="display: none;" type="submit" id="submit-button">Not Shown</button> 
    <button type="button" onclick="doFancyStuff()">Submit</button> 
</form> 

यह फार्म सत्यापन ट्रिगर किया जाएगा:

एक रूप होने

function doFancyStuff() { 
    $("#submit-button").click(); 
} 

या jQuery

बिना

function doFancyStuff() { 
    document.getElementById("submit-button").click(); 
} 

मेरे मामले में, मैं सत्यापन और गणना के एक झुंड करना जब फर्जी सबमिट बटन दबाया जाता है, यदि मेरा मैन्युअल सत्यापन विफल रहता है, तो मुझे पता है कि मैं प्रोग्रामेटिक रूप से कर सकता हूं छुपा सबमिट बटन पर क्लिक करें और फॉर्म सत्यापन प्रदर्शित करें।

https://jsfiddle.net/45vxjz87/1/

Answer 8

या तो आप submit

<button type="submit" onclick="submitform()" id="save">Save</button> 

के लिए बटन प्रकार बदल सकते हैं या आप सबमिट बटन पर छिपा कर सकते हैं, के साथ एक और बटन रखें:

यहाँ एक बहुत ही सरल अवधारणा दिखा jsfiddle है टाइप = "बटन" और उस बटन के लिए इवेंट पर क्लिक करें

<form> 
    <button style="display: none;" type="submit" >Hidden button</button> 
    <button type="button" onclick="submitForm()">Submit</button> 
</form>