jquery - 单选按钮未被验证

标签 jquery html css

网址:Form not working

我有以下脚本可以验证表单并像这里的示例一样提交:form working

但由于某种原因,它在第一个链接上不起作用。

我的 Javascript 代码保持不变:

$("form").submit(function () {
    var html = '';
    var submitme = true;
    $(':radio').each(function() {
        nam = $(this).attr('name');
        if (!$(':radio[name="'+nam+'"]:checked').length) {
            $(':radio[name="'+nam+'"]+label').addClass('error');
            if(html.indexOf(nam) < 0){
                html += nam +' group not checked' + '</br>';
            }
            submitme = false;
        }
        else {
            $(':radio[name="'+nam+'"]+label').removeClass('error');
        }
    });
    if(submitme == false){
        $('.errorDiv').empty().append(html).show().addClass('error');
    }
    else{
        $('.errorDiv').hide();
    }

    return submitme;
});

我要做的是验证表单并将任何未选中的单选按钮设为红色并且不提交表单。用户选择所有表单 radio 后,应提交表单。

我也有这段代码,一旦选择了所有内容,它就会禁用提交按钮,这样用户就不能提交两次:

$("form").submit(function () {  
        var form = $(this);
        form.find("input[type=submit]").attr("disabled", "disabled")
        form.find("input[type=submit]").attr("value", "Processing...");
        // prevent the user from hitting ENTER on a field to submit again
        form.find("input").attr("readonly", true);
        document.body.style.cursor = "wait";
});

知道把它放在前面的 jquery 代码片段的什么地方吗?

最佳答案

您必须在页面上包含该代码才能正常工作。

您作为 miscScripts.js 链接的文件是无效的 javascript。

开始于:

<!--

// function to swap inner DIVs in homepage left content
function showDiv(div_number) {

结束于

});
-->

它应该是:(删除页面级评论标记)

// function to swap inner DIVs in homepage left content
function showDiv(div_number) {

结束于

});

仅供引用,我没有在任何文件中看到“提交”代码,它在您页面上的哪个文件中?

这些是该页面源上的链接:

<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="theScriptsStyles/miscScripts.js"></script>


<script type="text/javascript" src="theScriptsStyles/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="theScriptsStyles/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="theScriptsStyles/jquery.naviDropDown.1.0.js"></script>

EDIT2:好的,我花了点时间查看了您的代码,有些地方看起来有点奇怪,我对您的目标做了一些粗略的假设并重新编写了您的代码以生成此代码:

注意:我使用更改事件在用户更正表单时关闭红色错误。您可以使用它,也可以根据需要进行修改。

$("form#myform").submit(function (e) {
    var myform = $(this); //done this way in case selector has multiple forms
    var invalidCount = myform.data('hasinvalidentries'); //check validation
    if (invalidCount === 0) { //0 not falsy value as 0 set errors check below
        return; // let the event bubble away
    }
    e.preventDefault(); //not check so prevent submit
    var mysubmitButton = myform.find("input[type=submit]");
    mysubmitButton.prop("disabled", true).data('buttontext', mysubmitButton.val()).val('processing...');
    document.body.style.cursor = "wait";
    var html = '';
    var submitme = true;
    $('input[type=radio]').each(function () {
        var nam = $(this).attr('name');
        var radioGroup = myform.find('input:radio[name="' + nam + '"]');
        if (!radioGroup.is(':checked')) {
            radioGroup.next('label').addClass('error');
            if (html.indexOf(nam) < 0) {
                html += nam + ' group not checked' + '<br />';
            }
            submitme = false;
        }
    });

    if (submitme) {
        $('.errorDiv').hide();
        myform.data('hasinvalidentries', 0).submit();
    } else {
        $('.errorDiv').empty().append(html).show().addClass('error');
        return submitme;
    }
});
/* Check to set the radio group as no errors when change one as one will have to be selected.
  Still possible if I manually using code set all to unselected, but acts on users changes at least.
  */
$('form#myform').on('change', 'input:radio', function () {
    var myform = $(this).parents('form'); //done this wa in case selector incudes multiple forms
    var errorCount = myform.find('.error').length;
    if (errorCount) {
        var nam = $(this).attr('name');
        myform.find(':radio[name="' + nam + '"]+label').removeClass('error');
        var mysubmitButton = myform.find("input[type=submit]");
        mysubmitButton.removeProp("disabled").val(mysubmitButton.data('buttontext'));
        errorCount = myform.find('.error').length;
        myform.data('hasinvalidentries', errorCount);
    }
});  

这是该代码的一个工作示例:http://jsfiddle.net/whNtP/

关于jquery - 单选按钮未被验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15163718/

相关文章:

javascript - 如何将开关结果插入​​html对象

html - 如何使 html 下拉列表在 ios web 应用程序中始终显示为滚动菜单?

jQuery放大和缩小可滚动div,当所有内容可见时消除滚动

css - 如何应用 justify-content : space-between to this column?

javascript - CSS-sprite 菜单和 jQuery addClass() 方法

javascript - 是否可以触发事件然后将事件扩展到另一个元素?

jquery - 来自 IIS 的压缩 XHR 响应不完整

javascript - 为什么 或 &#8203 被随机插入到我的 html 正文中?

Javascript 设置一个变量,该变量在每个子元素上发生变化

javascript - 当不是每个元素都有选择类 jquery 时选择第 nth-last-child