2013-05-24 5 views
-2

html 버튼을 클릭하면서 생성되는 양식이 있습니다.JQuery 유효성 검사가 작동하지 않습니다.

다음은 코드입니다.

<html> 
    <head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
    </head>  
    <script type="text/javascript"> 
    function myFunction() 
    { 
    alert("Hello World!"); 
    } 
    function createDoc() 
    { 
    var w=window.open('','','width=400,height=300'); 
    w.document.open();w.document.write("<table width=350 height =200 <tr><td align=center>"); 
    w.document.write("<table width=300 height =200 ><tr><td>"); 
    w.document.write("<form class='commentform' action='hiii.php' method='GET'>"); 
    w.document.write("<input type='hidden' name='pcode' value='00214'>"); 
    w.document.write("<label>Name:</label></td><td><input type='text'id='pname' name='pname' value=''>"); 
    w.document.write("</td></tr><tr><td>"); 
    w.document.write("<label>Email Address:</label></td><td><input type='text' name='pemail' value=''/>"); 
    w.document.write("</td></tr><tr><td>"); 
    w.document.write("<label>Mobile number:</label></td><td><input type='text' name='pnumber' value=''/>"); 
    w.document.write("</td></tr><tr><td align=center>"); 
    w.document.write("<input type='submit' onclick='validate()' name='submit' value='Submit'/>"); 
    w.document.write("</form>");w.document.write("</td></tr>"); 
    w.document.write("</td></tr></table>"); 
    w.document.write("</td></tr></table>"); 
    w.focus();w.document.close(); 
    } 
    function validate(){ 
    var pname = $('#pname').val(); 
    alert(pname); 
    } 
    </script> 
    <input type="button" value="Click to Connect" onclick="createDoc()"> 
</html> 

클릭하여 연결 버튼 클릭하면 양식이 포함 된 팝업이 표시됩니다.

동적으로 생성 된 필드에 대한 유효성 검사를 적용하려고하지만 알림을받는 대신 양식이 직접 제출됩니다. 여기서 내가 잘못하고있는 것일 수 있습니다.

내가 명령은 당신이 당신의 유효성 검사를 실행하는 데 그 기본 동작을 중지 할 필요가 없도록

답변

0
w.document.write("<input type='submit' onclick='javascript: return window.opener.validate(event, window.document);' name='submit' value='Submit'/>"); 

onclick='javascript: return window.opener.validate(event, window.document);' 

function validate(e, w) { 
    var pname = $('#pname', w).val(); 
    alert(pname); 
    e.preventDefault(); 
    return false; 
} 

위의 코드를 바꾸십시오. 나는 그것이 효과가있을 것이라고 생각한다.

+0

입력 상자에 일부 값을 입력 한 후 pname이 정의되지 않음을 나타냅니다. – Rohit

+0

@Rohit 한 번 확인하고 코드를 업데이트했습니다. – som

0

형태가되도록 설계로 버튼이 여전히 실행되고 제출 양식을 제출하기 전에 내 유효성 검사 기능에 와서해야 원하는 그 함수가 성공적인 검증 후에 제출 프로세스를 진행하게하십시오.

jQuery와 함께 event.preventDefault()와 같은 형식을 방지하는 방법으로 실험을 수행 할 수 있지만 양식 제출을 중지시키는 기능이 이미 포함 된 jQuery 라이브러리를 실제로 활용해야합니다.

1

event.preventDefault()을 사용하면 기본 작업을 취소 할 수 있습니다. 어쩌면 이런 식으로. 유효성 확인 메소드에 event을 전달하면됩니다. validate 함수에 event.preventDefault()을 호출하십시오.

<script type="text/javascript"> 

$(document).ready(function() { 
    createDoc(); 
} 


function createDoc() { 
    var w=window.open('','','width=400,height=300'); 
    w.document.open();w.document.write("<table width=350 height =200 <tr><td align=center>"); 
    w.document.write("<table width=300 height =200 ><tr><td>"); 
    w.document.write("<form class='commentform' action='hiii.php' method='GET'>"); 
    w.document.write("<input type='hidden' name='pcode' value='00214'>"); 
    w.document.write("<label>Name:</label></td><td><input type='text'id='pname' name='pname' value=''>"); 
    w.document.write("</td></tr><tr><td>"); 
    w.document.write("<label>Email Address:</label></td><td><input type='text' name='pemail' value=''/>"); 
    w.document.write("</td></tr><tr><td>"); 
    w.document.write("<label>Mobile number:</label></td><td><input type='text' name='pnumber' value=''/>"); 
    w.document.write("</td></tr><tr><td align=center>"); 
    w.document.write("<input type='submit' onclick='validate(event)' name='submit' value='Submit'/>"); 
    w.document.write("</form>");w.document.write("</td></tr>"); 
    w.document.write("</td></tr></table>"); 
    w.document.write("</td></tr></table>"); 
    w.focus();w.document.close(); 

} 

function validate(e) { 
e.preventDefault(); 

var pname = $('#pname').val(); 
alert(pname); 
} 

</script> 
+1

'onclick = 'validate()''는 어떻게됩니까? –

+0

@Jamie도 작동합니다! – Amyth

+0

아니요. 코드에 이미 나와 있습니다. o –

0

당신은 당신이 입력을 검증 한 후 양식 사용을

<input type='submit' onclick='return false; validate();' name='submit' value='Submit'/> 

제출 양식을하지 않고 폼 사용을

$('.commentform').submit(); 
0

왜 전에 제출하려는 경우 다음과 같이 새 창이 열리기 때문에 스크립트를 포함하는 표를 작성하십시오.

var w=window.open('','','width=400,height=300'); 
w.open(); 
w.document.write("<head> <script type='text/javascript'> 
function validate(){ 
var pname = $('#pname').val(); 
alert(pname);} 
</script></head>"; 
w.document.write("<table width=350 height =200 <tr><td a ...more code here 
관련 문제