2017-02-20 11 views
0

私はこのサイトを初めて使いましたが、先週インターネットでこれを解説しています。If Elseステートメントとdocument.getElementByIDを使用したフォーム検証

私が望むのは、送信ボタンをクリックしたときに検証するフォームの3つのフィールドのうち2つで、次のページに行くのではなく、それを許可する前に検証する必要があります。これは私が持っているものである

HTML:

function validateForm(input) { 
 
    var isValid = true; 
 
    if (!document.getElementById("Name").value.trim().length) { 
 
    isValid = false; 
 
    alert("Please enter your First Name"); 
 
    } else if (!document.getElementById("Comment1").value.trim().length) { 
 
    isvalid = false; 
 
    alert("Please enter your phone number"); 
 
    } else { 
 
    return false; 
 
    } 
 
    if (isValid) { 
 
    document.getElementById('ICContainer').style.display; 
 
    loadInstantChat(); 
 
    } 
 
}
input[type=submit] { 
 
    position: relative; 
 
    top: 20px; 
 
    width: 322px; 
 
    background-color: #EF423E; 
 
    border-radius: 5px; 
 
    border: none; 
 
    color: white; 
 
    padding: 4px; 
 
    font-family: 'arial'; 
 
    font-size: 11pt; 
 
    text-decoration: double; 
 
    margin: 4px 2px; 
 
    cursor: pointer; 
 
} 
 

 
input[type=text], 
 
[type=number], 
 
[type=email] { 
 
    width: 323px; 
 
    padding: 4px 4px; 
 
    margin: 8px 0; 
 
    box-sizing: border-box; 
 
    border: solid #EF423E 2px; 
 
    border-radius: 5px; 
 
    color: #4E4E56; 
 
    background-color: #f9f9f9; 
 
    font-family: 'arial'; 
 
    font-size: 11pt; 
 
}
<body onload="handleRebootOrRefresh();"> 
 
    <form name="input" action="#" onsubmit="return validateForm(input)" method="post"> 
 
    Your first name:* <input id="Name" type="text" name="inputName"> Your phone number:* <input id="Comment1" type="text" name="inputNumber"> Claim Reference: <input id="Comment2" type="text" name="inputClaim"> 
 
    <input type="submit" value="Chat Now" onclick="validateForm(input)"> 
 
    </form> 
 

 
    <div id="ICContainer" style="position: absolute; left: 0px; top: 0px; width: 350px; height: 550px; display: none"></div> 
 
</body>
私は触れたくない、このコードで実行されている他のJavaScriptの多くがあります

が、私上位2フィールドを検証する方法を知る必要があり、正常に検証された場合は、次のページに処理します(つまり、document.getElementByID('ICContainer').style.display; loadInstantChat();

これはLogMeInレスキューインスタントチャットのインスタンスであり、サポートラインは「文字通りステップバイステップのガイドを提供していますが、何も触れないでください」となっています。あなたは、フォームの送信

<script type="text/javascript"> 
function validateMyForm() 
{ 
    if(check if your conditions are not satisfying) 
    { 
    alert("validation failed false"); 
    returnToPreviousPage(); 
    return false; 
    } 

    alert("validations passed"); 
    return true; 
} 
</script> 

答えて

0

私はあなたのフォームの地上子からのいくつかの属性を削除する必要があると思う:

action="#" onsubmit="return validateForm(input)" method="post" 

validateFormを呼び出す新しい関数(handleForm)を作成できます。また、eveあなたのサーバーにAJAXリクエストを送信しても問題ありません。

<input type="submit" value="Chat Now" onclick="handleForm(input)"> 

[...] 
function handleForm(input) { 
    var isValid = validateForm(input); 
    if (isValid) { 
    //perform your ajax request here 
    } 
} 

function validateForm(input) { ... 
+0

ありがとう。しかし私はこれを試みました。私は動作検証を得ることができますが、検証後にdocument.getElementById( 'ICContainer')を呼び出します。 loadInstantChat(); –

+0

'私は働くための検証を得ることができますが、検証後にはそれを働かせることはできません。 – jdmdevdotnet

+0

私は必要な2つのフォームを検証しました。名前と電話番号には、ボックスが必要であるという警告が表示されます。ボックスが正しく記入されていれば、警告は表示されませんが、次の文書を開く/次のスクリプトを実行しません。 –

0

よう

<form name="myForm" onsubmit="return validateMyForm();"> 

と機能を防ぐために、関数の戻り値を使用することができます

関連する問題