Как убедиться, что мой флажок подтвержден, прежде чем разрешить отправку моей формы

Еще раз начинающий JS снова встает на вопрос. Я хочу подтвердить флажок в конце моей формы, прежде чем разрешить пользователю отправлять мне свои данные, и если он не отмечен галочкой, они не могут отправить форму. Я посмотрел здесь и попытался использовать разные примеры кодирования, но я просто нахожу все это очень запутанным после просмотра 10 или 20 страниц разного кода. Вот то, что я написал до сих пор, от того, что я могу сделать мою форму просто перескакивает через мой код проверки CheckBox, который, очевидно, что я не хочу, чтобы это произошло:Как убедиться, что мой флажок подтвержден, прежде чем разрешить отправку моей формы

<head> 
<script> 
function validate(){ 
    send = document.getElementById("confirm").value; 

    errors = ""; 

    if (send.checked == false){ 
    errors += "Please tick the checkbox as confirmation your details are correct \n"; 
    } else if (errors == ""){ 
     alert ("Your details are being sent) 
    } else { 
     alert(errors); 
    } 
    } 
</script> 
</head> 

<body> 
    <div>  
    <label for="confirm" class="fixedwidth">Yes I confirm all my details are correct</label> 
    <input type="checkbox" name="confirm" id="confirm"/> 
    </div> 
    <div class="button"> 
    <input type="submit" value="SUBMIT" onclick="validate()"/> 
    </div>

источник

2013-09-05 Steve

Посмотрите на следующем уроке и сосредоточиться на использовании пакета 'onsubmit' события , [Проверка формы] (http://www.tutorialspoint.com/javascript/javascript_form_validations.htm) – Itay

вы делаете send быть confirm значение.

send = document.getElementById("confirm").value;

Этот способ send.checked не будет работать. Потому что вы пытаетесь получить атрибут checked из значения (возможно, строки).

Для правильного использования, попробуйте следующее:

send = document.getElementById("confirm"); 
sendValue = send.value; 
sendCheck = send.checked;

Затем вы можете проверить с

if (sendCheck == false){ //sendCheck evaluate true if checkbox is checked, false if not.

Чтобы остановить форму от представления, return false; после оповещения об ошибках.

Здесь полный код - обновлен для корректной работы (учитывая <form> тег имеет идентификатор tesForm):

document.getElementById("testForm").onsubmit = function() { 
    var send = document.getElementById("confirm"), 
     sendValue = send.value, 
     sendCheck = send.checked, 
     errors = ""; 

    //validate checkbox 
    if (!sendCheck) { 
     errors += "Please tick the checkbox as confirmation your details are correct \n"; 
    } 


    //validate other stuff here 




    //in case you added more error types above 
    //stacked all errors and in the end, show them 
    if (errors != "") { 
     alert(errors); 
     return false; //if return, below code will not run 
    } 

    //passed all validations, then it's ok 
    alert("Your details are being sent"); // <- had a missing " after sent. 
    return true; //will submit 
}

Fiddle: http://jsfiddle.net/RaphaelDDL/gHNAf/

источник

2013-09-05 17:39:38 RaphaelDDL

Это не остановит отправку формы. – Itay

Спасибо за ваш вклад, и он почти там. Если я поставлю галочку на флажке, он отправит форму, которая хороша, но если я оставлю флажок пустым, он просто перезагрузит страницу и снова запустится с пустой формой, без сообщения об ошибке. – Steve

@Steve Хорошо, исправлен код и добавлен пример. Этот новый подход лучше для чтения, вам не нужно много 'if-else if' – RaphaelDDL

Я бы просто включить/отключить вашу кнопку, основываясь на состояние флажка. Добавить идентификатор вашей кнопки, (я буду делать вид, кнопка отправки имеет идентификатор btnSubmit)

document.getElementById("confirm").onchange = function() { 
    document.getElementById("btnSubmit").disabled = !this.checked; 
}

Демо: http://jsfiddle.net/tymeJV/hQ8hF/1

источник

2013-09-05 17:40:56 tymeJV

Как убедиться, что мой флажок подтвержден, прежде чем разрешить отправку моей формы

ответ

Смежные вопросы