-1

我有一个简单的表单，使用带有 CSS 星的单选按钮收集 5 星评级。

我正在尝试添加一个非常简单的 JavaScript 脚本，以在未选择任何星级的情况下停止提交评级（目前这样做会向 MySQL 添加 0 星评级）。

我对 JavaScript 非常陌生，现在才真正学习它。

我有这个：

<script>
function validateForm()
{
var x=document.forms["userparkrating"]["rating"].value;
if (x==0 || x=="")
  {
  alert("You must rate this park before submitting");
  return false;
  }
}
</script>

在页面的头部标签之间，如果没有选择星号，它应该显示一条错误消息，但没有选择，php/mySQL 进程正常。有人可以帮我告诉我出了什么问题吗？

以下是使用的表格：

<form name="userparkrating" action="userparkreview.php?park_id=<?=$park_id?>" onsubmit="return validateForm()" method="post">
    <input type="hidden" value="<?=$park_id?>" name="park_id">

<div class="star-rating">

            <input class="rb0" id="Ans_1" name="rating" type="radio" value="0" checked="checked" />                       
            <input class="rb1" id="Ans_2" name="rating" type="radio" value="0.5" />
            <input class="rb2" id="Ans_3" name="rating" type="radio" value="1" />
            <input class="rb3" id="Ans_4" name="rating" type="radio" value="1.5" />    
            <input class="rb4" id="Ans_5" name="rating" type="radio" value="2" />    
            <input class="rb5" id="Ans_6" name="rating" type="radio" value="2.5" />    
            <input class="rb6" id="Ans_7" name="rating" type="radio" value="3" />
            <input class="rb7" id="Ans_8" name="rating" type="radio" value="3.5" />    
            <input class="rb8" id="Ans_9" name="rating" type="radio" value="4" />
            <input class="rb9" id="Ans_10" name="rating" type="radio" value="4.5" />
            <input class="rb10" id="Ans_11" name="rating" type="radio" value="5" />

            <label for="Ans_1" class="star rb0l" onclick=""></label>
            <label for="Ans_2" class="star rb1l" onclick=""></label>
            <label for="Ans_3" class="star rb2l" onclick=""></label>
            <label for="Ans_4" class="star rb3l" onclick=""></label>
            <label for="Ans_5" class="star rb4l" onclick=""></label>
            <label for="Ans_6" class="star rb5l" onclick=""></label>
            <label for="Ans_7" class="star rb6l" onclick=""></label>
            <label for="Ans_8" class="star rb7l" onclick=""></label>
            <label for="Ans_9" class="star rb8l" onclick=""></label>
            <label for="Ans_10" class="star rb9l" onclick=""></label>
            <label for="Ans_11" class="star rb10l last" onclick=""></label>

            <label for="Ans_1" class="rb" onclick="">0</label>
            <label for="Ans_2" class="rb" onclick="">1</label>
            <label for="Ans_3" class="rb" onclick="">2</label>
            <label for="Ans_4" class="rb" onclick="">3</label>
            <label for="Ans_5" class="rb" onclick="">4</label>
            <label for="Ans_6" class="rb" onclick="">5</label>
            <label for="Ans_7" class="rb" onclick="">6</label>
            <label for="Ans_8" class="rb" onclick="">7</label>
            <label for="Ans_9" class="rb" onclick="">8</label>
            <label for="Ans_10" class="rb" onclick="">9</label>
            <label for="Ans_11" class="rb" onclick="">10</label>

            <div class="rating"></div>
            <div class="rating-bg"></div> 
        </div>
<br>
<input type="submit" value="Submit Rating" name="submit">

</form>
4

2 回答 2

1

You can't access the value of a radio button using document.forms[formname][radioButton].value.

You need to iterate over each of the radio elements using a loop to check which is checked.

function validateForm() {
    var ratings=document.forms["userparkrating"]["rating"];
    var rating = 0;
    for (var i = 0; i < ratings.length; i++) {
        if (ratings[i].checked) {
            rating = ratings[i].value;
        }
    }
    if (not(0<rating && rating<=5)) {
      alert("You must rate this park before submitting");
      return false;
    }
    return true;
}

Also, as no one has mentioned, while client side validation is convenient, its is not secure. Regardless of what validation exists in the Javascript, a user could disable it and submit a value of 0, or -1 or "hello". Always validate all user responses on the server to ensure it is clean, valid and above all safe.

You can see this in action on JsFiddle.

于 2013-09-04T00:26:00.800 回答
0

你有没有尝试过

如果 (x==0 || !x)

编辑

var radios = document.getElementsByName("rating"); 

for(var i = 0; i < radios.length; i++) { 
if(radios[i].checked) x = radios[i].value; 
}
于 2013-09-03T23:35:53.513 回答