js는 두 가지 양식의 유효성을 확인합니다

Question

이번이 처음 게시되었습니다. JavaScript를 처음 사용하고 동일한 페이지에 두 개의 PayPal 양식이있는 주문 페이지에서 작업하고 있습니다. 두 양식의 코드는 동일하지만 제품의 성인용 버전과 어린이 용 코드가 동일합니다.

나는 클라이언트 의견을 묻는 선택 드롭 다운을 만들고 JavaScript 유효성 검사 스크립트를 통해 드롭 다운을 만들어야합니다. 이 스크립트는 첫 번째 제품/양식에서 작동하지만 고객이 두 번째 제품을 구매하려고하지만 첫 번째 양식의 필수 입력란을 채우지 않으면 해당 제품의 유효성을 검사하거나 구매할 수 없습니다.

두 개의 다른 스크립트를 사용해 보았습니다. 물론 고객이 두 번째 제품 만 구매하려는 경우에도 공백으로 남겨두면 첫 번째 양식의 유효성을 검사하지 않습니다.

해결책은 "else"또는 "while"인수를 # 1 또는 # 2에 대한 피드백이있는 경우 유효성을 검사하지만 확인 할 수 없다고 스크립트에 추가하는 것일 수 있다고 생각합니다. 어떻게 작동하게 만드는지.

function validateForm() { 
var x=document.forms["myPayPal"]["os1"].value 
if (x==null || x=="") { 
alert("Please tell us how you heard about our product"); 
return false; 
} 
} 


<form name="myPayPal" action="https://www.paypal.com/cgi-bin/webscr" onsubmit="return validateForm()" method="post" id="payPalForm"> 
<input type="hidden" name="cmd" value="_cart"> 
<input type="hidden" name="business" value="1234567890123"> 
<input type="hidden" name="lc" value="US"> 
<input type="hidden" name="item_name" value="OUR PRODUCT"> 
<input type="hidden" name="button_subtype" value="products"> 
<input type="hidden" name="no_note" value="0"> 
<input type="hidden" name="currency_code" value="USD"> 
<input type="hidden" name="shipping" value="5.99"> 
<input type="hidden" name="add" value="1"> 
<input type="hidden" name="bn" value="PP-ShopCartBF:add-to-cart.png:NonHostedGuest"> 
<div style="display: inline-block; padding: 4% 3% 1% 0"> 
<input type="hidden" name="on0" value="CHOOSE STYLE"><h2 style="float: left; display: inline-block; padding: 0 30px 0 0">CHOOSE <br>STYLE:</h2> 
<div class="styled-select" style="margin:0;"> 
<select name="os0" class="select"><option value="White">White $13.95 USD</option> 
<option value="Blue">Blue $13.95 USD</option> 
<option value="Green">Green $13.95 USD</option> 
<option value="Yellow">Yellow $13.95 USD</option> 
<option value="Kid's Pink">Kid's Pink $13.95 USD</option> 
<option value="Kid's Aqua">Kid's Aqua $13.95 USD</option> 
</select> 
</div> 
</div> 
<input type="hidden" name="currency_code" value="USD"> 
<input type="hidden" name="option_select0" value="White"> 
<input type="hidden" name="option_amount0" value="13.95"> 
<input type="hidden" name="option_select1" value="Blue"> 
<input type="hidden" name="option_amount1" value="13.95"> 
<input type="hidden" name="option_select2" value="Green"> 
<input type="hidden" name="option_amount2" value="13.95"> 
<input type="hidden" name="option_select3" value="Yellow"> 
<input type="hidden" name="option_amount3" value="13.95"> 
<input type="hidden" name="option_select4" value="Pink"> 
<input type="hidden" name="option_amount4" value="13.95"> 
<input type="hidden" name="option_select5" value="Aqua"> 
<input type="hidden" name="option_amount5" value="13.95"> 
<input type="hidden" name="option_index" value="0"> 
<!--select !--> 
<div style="display: inline-block; padding: 0 3% 1% 0; float:left; height:60px; clear:both; position:relative; left: 13.9%;"> 
<input type="hidden" name="on1" value="REFERRAL"><p style="float: left; display: inline-block; padding: 19px 30px 0 3px; font-weight:normal;">How did you hear about us?</p> 
<div class="styled-select" style="margin:0;"> 
<select name="os1"> 
    <option selected></option> 
    <option value="Online">Online </option> 
    <option value="Through a friend">Through a friend </option> 
    <option value="Google">Google </option> 
    <option value="My doctor">My doctor </option> 
</select> 
</div> 
</div> 
<!--end select !--> 
<input type="image" src="add-to-cart.png" border="0" name="submit" alt="" class="add-to-cart" style="position: relative; padding: 0px; left: 13.9%; margin: 1.5% 0px; float:left; clear: both;"> 
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> 
</form> 

Answer 1

atleast os0 또는 os1이 선택되었는지 확인하려면 자바 스크립트를 추가하십시오.

function validateForm() { 
var y=document.forms["myPayPal"]["os0"].value 
var x=document.forms["myPayPal"]["os1"].value 

if (x==null && y==null){ 
alert("Please select one option product"); 
return false; 
} 


if (x==null || x=="") { 
alert("Please tell us how you heard about our product"); 
return false; 
} 
} 

Answer 2

아래 코드를 시도해보십시오.

자바 스크립트 :

<script type="text/javascript"> 

function validateForm() { 


if(document.myPayPal.os0.value == "-2") 
    { 
    alert("Please provide your OS0 !"); 
    return false; 
    } 

if(document.myPayPal.os1.value == "-1") 
    { 
    alert("Please provide your OS1 !"); 
    return false; 
    } 
    return(true); 

} 
</script> 

HTML :

<html> 
<body> 

<form name="myPayPal" action="https://www.paypal.com/cgi-bin/webscr" onsubmit="return(validateForm());" method="post" id="payPalForm"> 
<input type="hidden" name="cmd" value="_cart"> 
<input type="hidden" name="business" value="1234567890123"> 
<input type="hidden" name="lc" value="US"> 
<input type="hidden" name="item_name" value="OUR PRODUCT"> 
<input type="hidden" name="button_subtype" value="products"> 
<input type="hidden" name="no_note" value="0"> 
<input type="hidden" name="currency_code" value="USD"> 
<input type="hidden" name="shipping" value="5.99"> 
<input type="hidden" name="add" value="1"> 
<input type="hidden" name="bn" value="PP-ShopCartBF:add-to-cart.png:NonHostedGuest"> 

<!--select !--> 
<div style="display: inline-block; padding: 4% 3% 1% 0"> 
<input type="hidden" name="on0" value="CHOOSE STYLE"><h2 style="float: left; display: inline-block; padding: 0 30px 0 0">CHOOSE <br>STYLE:</h2> 
<div class="styled-select" style="margin:0;"> 
<select name="os0" class="select"> 
<option selected value="-2">[choose your os0]</option> 
<option value="White">White $13.95 USD</option> 
<option value="Blue">Blue $13.95 USD</option> 
<option value="Green">Green $13.95 USD</option> 
<option value="Yellow">Yellow $13.95 USD</option> 
<option value="Kid's Pink">Kid's Pink $13.95 USD</option> 
<option value="Kid's Aqua">Kid's Aqua $13.95 USD</option> 
</select> 
</div> 
</div> 
<!--end select !--> 

<input type="hidden" name="currency_code" value="USD"> 
<input type="hidden" name="option_select0" value="White"> 
<input type="hidden" name="option_amount0" value="13.95"> 
<input type="hidden" name="option_select1" value="Blue"> 
<input type="hidden" name="option_amount1" value="13.95"> 
<input type="hidden" name="option_select2" value="Green"> 
<input type="hidden" name="option_amount2" value="13.95"> 
<input type="hidden" name="option_select3" value="Yellow"> 
<input type="hidden" name="option_amount3" value="13.95"> 
<input type="hidden" name="option_select4" value="Pink"> 
<input type="hidden" name="option_amount4" value="13.95"> 
<input type="hidden" name="option_select5" value="Aqua"> 
<input type="hidden" name="option_amount5" value="13.95"> 
<input type="hidden" name="option_index" value="0"> 
<!--select !--> 

<div style="display: inline-block; padding: 0 3% 1% 0; float:left; height:60px; clear:both; position:relative; left: 13.9%;"> 
<input type="hidden" name="on1" value="REFERRAL"><p style="float: left; display: inline-block; padding: 19px 30px 0 3px; font-weight:normal;">How did you hear about us?</p> 
<div class="styled-select" style="margin:0;"> 
<select name="os1"> 
    <option selected value="-1">[choose your os1]</option> 
    <option value="Online">Online </option> 
    <option value="Through a friend">Through a friend </option> 
    <option value="Google">Google </option> 
    <option value="My doctor">My doctor </option> 
</select> 
</div> 
</div> 
<!--end select !--> 
<input type="submit" value="submit" border="0" name="submit" alt="" class="add-to-cart" style="position: relative; padding: 0px; left: 13.9%; margin: 1.5% 0px; float:left; clear: both;"> 

</form> 
</body> 
</html>