JS monitoring from the form of input and select, constant monitoring, no input or select information error, not allow data submission

The 1.html code adds the. Error label to the input and select sibling elements to store the error message

<form action= "" method= "Post" enctype= "Multipart/form-data" id= "            Sound-dialog-form "> <div class=" Form-group "> <label for=" name "> Name </label> <input type= "text" class= "Form-control" id= "name" value= "" Name= "Soundname" > <span id= "Soundname-err or "class=" error "></span> </div> <div class=" Form-group "> <label for=" Sound "& gt; audio </label> <select name= "sound" id= "sounds" > <option value= "" Disabled hidden selected Styl E= "Font-weight:bold" > Audio selection .....</option> <volist name= "Play_volume" id= "Play_volume" > <        Option value= "{$play _volume.name}" >{$play _volume.name}</option> </volist> </select> <span id= "Playvolume-error" class= "Error" ></span> </div> </form> 

2. Define CSS styles. form-group {position:relative;} . The definition of error can be referenced

. error {Position:absolute; top:50px; left:73px; color: #fff; background: #e00a0a; font-weight:bold; border:0; border -radius:5px; }

3.js part

The regular expression var reg1 =/^.  {1,}$/; The name satisfies the condition//alert (window.innerwidth+ ' ssssssssss ' +window.innerheight);//alert (window.innerheight);//         Set Audio information function Setaudio ($id, name,sound,length,note,volume) {var tan = Layer.open ({type:1, title: ' Edit Sound ', area:[' 370px ', ' 450px '], offset: ' 50px ', anim:1, Content: $ ("#sound-dialog"), btn:[' Save            ', ' play ', ' delete ', ' Cancel ', Btn1:function (index) {///Get the value of the tag var name = $ (' #name '). Val ();            var length = $ (' #length '). Val ();            var sound = $ (' #sound '). Val ();            var note = $ (' #note '). Val ();            var Volumeamount = $ ("#volumeAmount"). Text ($ ("#volumeSlider"). Slider ("value"). Text (); The sound name of the regular if (!reg1.test (name)) {var soundnameerror=$ ("#SoundName-error"). Text ("Please enter the correct name"); $ ("#SoundName-error") . css ({"padding": "2px 6px 2px 6px"});            ErrorName ("name", Soundnameerror);} if (sound===null| | sound=== "" | | sound===undefined) {var playvolumerror=$("#PlayVolume-error"). Text ("Please select Audio"), $ ("#PlayVolume-error"). css ({"padding": "2px 6px 2px 6px"});            Errorvolume ("Sound", playvolumerror); return; } if (! Soundnameerror) {$.ajax ({"url": "{: U (' Sound/editvolume ')}", "type":                      "POST", "data": {"action": "Editsound", "id": $id,                      "Name": Name,//"Length": Length, "Volumeslider": Volumeamount, "Note": note, "Sound": Sound}, Success:function (DA                        TA) {layer.close (index);                        Layer.msg ("Modified successfully!");                    $ ("#navside"). Load ("/sound/index #navside");                    }, Error:function (data) {layer.msg ("Set Audio information error"); }})}, Btn2:fuNction (Index) {///volume var play_slider_val = number ("#volumeAmount"). Text ($ ("#volumeSlider"). Slider ("           Value ")). Text ());           Audio var play_audio_frequency = $ ("#sound"). Val ();           if (play_audio_frequency==null) {layer.msg ("Please select audio"); }else{//Get audio var audios= new roslib.                Message ({data:play_audio_frequency});                Volume_play.publish (audios); Debug volume var volumes= new roslib.                Message ({data:play_slider_val});                Volume_voice.publish (volumes);                Console.log (Play_slider_val);           Console.log (play_audio_frequency);        } return false; }, Btn3:function (index) {$.ajax ({"url": "{: U (' Sound/editvolume ')}", "type ":" Post "," data ": {" Action ": "Deletesound", "id": $id}, Success:function (data) {Laye                    R.close (index); Layer.msg ("Delete succeeded!                    ");                $ ("#navside"). Load ("/sound/index #navside"); }, Error:function (data) {layer.msg ("Error deleting audio!                ");        }})//return false;        }, End:function () {//Layer.msg ("Canceled");    }    });        if ($id!==undefined) {//$ ("#amount"). Val ($ ("#slider-range-max"). Slider ("value"));    LabelElement ($id, Name,sound,note,length,volume);        }else{labelelement ();    $ (". Layui-layer-btn2"). Hide ();         }}//Slider swipe to get the volume size $ ("#volumeSlider"). Slider ({min:0, max:100, value:100, Slide:function (event, UI) {        $ ("#volumeAmount"). Text (Ui.value);        $ ("#sound-volume"). Val (Ui.value);        var slider_display=$ ("#volumeAmount"). Text (); var slider_input= $ ("#VolumeValue"). Val (Slider_display); var slider_val=number (Slider_input.val ());//volume var audio_frequency = $ ("#sound"). Val ();//Voice if (Audio_frequenc       Y==null) {layer.msg ("Please select audio"); }else{//audio var number= new roslib.        Message ({data:audio_frequency});        Volume_play.publish (number); Volume var number1= new roslib.        Message ({data:slider_val});        Volume_voice.publish (NUMBER1);        Console.log (audio_frequency);       Console.log (Slider_val); }});//Gets the value of the element function LabelElement (id,name,sound,note,length,volume) {if (id===undefined&&name===undefined&&sound===undefined&&volume===undefined)    {id= ""; Name= ""; sound= "" note= ""; length= ""; volume=100;    } $ ("#name"). Val (name);    $ ("#sound"). Val (sound);    $ ("#sound"). Prop (' required ', false);    $ ("#note"). Val (note);    $ (' #sound-dialog '). Find (' #length '). val (length);    $ ("#volumeSlider"). Slider (' value ', volume);    $ ("#volumeAmount"). Text ($ ("#volumeSlider"). Slider ("value"). Text (); }//Hidden Error trigger Mode function ErrorName (value,error) {var errtxt=error.text ();//Get error message//Press Trigger Event $ ("#" +value). KeyUp (Fu    Nction () {var valuetext=$ ("#" +value). Val ();//monitor input values at any time errormode (value,valuetext,error,errtxt);   }); }//Hidden Error trigger Mode function Errorvolume (value,error) {var errtxt=error.text ();//Get error message//Click Trigger Event $ ("#" +value). Click (func    tion () {var valuetext=$ ("#" +value). Val ();//monitor input values at any time errormode (value,valuetext,error,errtxt); });} Error information processing function Errormode (value,texts,error,errtxt) {if (texts!== "" & &texts!==null&&texts!==undefined)    {Error.text ("");//Clear error message $ ("#" +value). Siblings (". Error"). css ({"padding": "0px"});        }else{//Add error message $ ("#" +value). Siblings (". Error"). Text (errtxt);    $ ("#" +value). Siblings (". Error"). css ({"padding": "2px 6px 2px 6px"}); }}

Effect Preview Link: Https://pan.baidu.com/s/1FkZ1DlqG_E_GFLw06HXtkQ Password: Irdi

JS monitoring from the form of input and select, constant monitoring, no input or select information error, not allow data submission