टीएल; डीआर मैं सिर्फ यह जानना चाहता हूं कि कैसे (सशर्त रूप से) फॉर्म क्रियाओं को जावास्क्रिप्ट के साथ निष्पादित करने से रोकें।

जब आप सबमिट बटन पर क्लिक करते हैं तो मैंने एक HTML पृष्ठ बनाया है जो आपको /game.html पर पुनर्निर्देशित करता है:

<form class = "initial-form" action = "/game.html">
    <!--a bunch of input elements-->
    <button type = "submit" value = submit id = "go-button">Go</button>
</form>

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

const $send = document.getElementById('go-button')

$send.onclick = ()=>{

const player = {
    roomName: "",
    username: ""
  }

  //populate player
  const joinOption = document.querySelector('input[name="join-option"]:checked').value
  player.roomName = $roomname.value
  player.username = $username.value

  socket.emit('validate-player', player, joinOption)
}

socket.on('validate-player-client', (res)=>{
  console.log(res)
  if(res.error){
    return alert('Error: ', res.error)
  }
  else if (res.approved){
    return alert('approved')
  }
})

मुझे पता है कि इसका पालन करना कठिन है, लेकिन 'मान्य-खिलाड़ी' बैक-एंड (नोड में) से अनुरोध है कि यह जांचने के लिए कि खिलाड़ी गुण सभी मान्य हैं या नहीं। बैक एंड तब 'मान्य-खिलाड़ी-क्लाइंट' उत्सर्जित करेगा, किसी ऑब्जेक्ट को 'अनुमोदित' संपत्ति या 'त्रुटि' संपत्ति के साथ भेज देगा। मैं प्रपत्र क्रिया को /game.html पर नेविगेट करने से रोकना चाहता हूं जब त्रुटि गुण वाला कोई ऑब्जेक्ट लौटाया जाता है। यह मैं कैसे करूंगा?

धन्यवाद दोस्तों!

1
Stoodent 6 अगस्त 2019, 05:47

2 जवाब

सबसे बढ़िया उत्तर

अपने बटन को सबमिट बटन नहीं बनाएं, और इसे फॉर्म के बाहर ले जाएं

<form class="initial-form" id="theForm" action="/game.html">
    <!--a bunch of input elements-->
</form>
<button type="button" id="go-button">Go</button>

अब यह कोड .on('validate-player-client' फॉर्म सबमिट करेगा

const $send = document.getElementById('go-button');
// make this button NOT
const form = document.getElementById('theForm');

$send.addEventListener('click', e => {
    const player = {
        roomName: "",
        username: ""
    }
    //populate player
    const joinOption = document.querySelector('input[name="join-option"]:checked').value
    player.roomName = $roomname.value
    player.username = $username.value
    socket.emit('validate-player', player, joinOption)
}

socket.on('validate-player-client', (res)=>{
    console.log(res)

    if(res.error){
        alert('Error: ', res.error);
    }
    else if (res.approved){
        form.submit();
    }
    else {
        // do something else here I guess
    }
})
1
Jaromanda X 6 अगस्त 2019, 06:28

आप onSubmit() का उपयोग कर सकते हैं और अपनी स्थिति के आधार पर true या false वापस कर सकते हैं।

function onSubmit() {
  if (document.form.name.value == '') {
    console.log('invalid');
    return false;
  } else {
    console.log('valid');
    return true;
  }
}
<form name="form" onSubmit="return onSubmit()">
  <input type="text" name="name">
  <button type="submit">Check</button>
</form>
0
Nidhin Joseph 6 अगस्त 2019, 05:51