Question

我正在使用Flask和HTML5制作情感分析UI。在主页html页面（使用render_template从Flask链接）上，我有单选按钮。我有一个自定义消息和“必填”设置，因此，如果未选择单选按钮，并且用户尝试单击“提交”，则会显示一条消息，并且用户无法提交。问题在于，如果未选择单选按钮，则消息不会消失，并且即使用户选择了按钮，也将不允许用户提交答案。必须刷新页面才能退出此页面。

如果我删除整个“ onvalid”部分，而只保留“ required”部分，则它可以很好地工作，但是随后我丢失了自定义消息，只有一个默认消息。如果有人可以帮助我了解为什么会发生这种情况以及如何解决它，我将不胜感激。

非常感谢。这是错误的代码部分（特别是第四行）：

<form method="post"><center class='sansserif'>
<table>
<tr>
<td><input type="radio" name="sentiment" value=1 oninvalid="this.setCustomValidity('Please select a rating before continuing.')" required="required"> Very negative<br>
</td>
</tr>
<tr>
<td><input type="radio" name="sentiment" value=2> Negative<br>
</td>
</tr>
<tr>
<td><input type="radio" name="sentiment" value=3> Neutral<br></td>
</tr>
<tr>
<td><input type="radio" name="sentiment" value=4> Positive<br></td>
</tr>
<tr>
<td><input type="radio" name="sentiment" value=5> Very Positive 
</center></td>
</tr>
<tr><td><br></td></tr>
<tr>
<td><center><input type="checkbox" name="English" value= 'checked'> <em> This sentence is in English</em></center><br></td>
</tr>
<tr>
<td><input class="button" type="submit" value="Submit"/></td>
</tr>
</table>
<br>
</form>

Answer 1

您可以使用jquery来显示1.如果未选择单选按钮，则显示一条消息； 2.如果用户单击一个单选按钮，则原始消息将被删除

<html>
<table>
 <tr>
  <td><input type="radio" name="sentiment" value=1> Very negative<br>
 </td>
 </tr>
 <tr>
 <td><input type="radio" name="sentiment" value=2> Negative<br>
 </td>
 </tr>
 <tr>
 <td><input type="radio" name="sentiment" value=3> Neutral<br></td>
 </tr>
 <tr>
 <td><input type="radio" name="sentiment" value=4> Positive<br></td>
 </tr>
<tr>
 <td><input type="radio" name="sentiment" value=5> Very Positive 
</center></td>
</tr>
<tr><td><br></td></tr>
<tr>
<td><center><input type="checkbox" name="English" value= 'checked'> <em> This 
 sentence is in English</em></center><br></td>
</tr>
<tr>
<td><button class='get_input'>Sumit</button></td>
</tr>
<div class='user_warning_message'></div>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
   $('.get_input').click(function() {
   if ($('input[name=sentiment]:checked').length === 0) {
    $('.user_warning_message').html('<div style="width:100px;height:50px;background-color:red">checkbox not selected</div>');
    }
  });
  $("input[name='sentiment']").change(function(){
    $('.user_warning_message').html('');
  });
});
 </script>
</html>

如果在未选择任何单选按钮的情况下单击该按钮，此当前解决方案将显示错误消息，并且如果再次选择其中一个单选按钮，则将清除该消息。

必需的单选按钮HTML / Flask

1 个答案: